diff --git a/css/optional/demos/basic/index.html b/css/optional/demos/basic/index.html
new file mode 100644
index 0000000000..69297aedfb
--- /dev/null
+++ b/css/optional/demos/basic/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Демонстрация применения стилей :optional и :required — :optional — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    label {
+      display: flex;
+      gap: .5rem;
+      align-items: center;
+    }
+
+    input {
+      border: 2px solid rgba(255, 255, 255, 0.5);
+      border-radius: 6px;
+      padding: 4px 8px;
+    }
+
+    input:optional {
+      border-color: #2e9aff;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <form>
+      <label>
+        Email:
+        <input type="email" name="email" required>
+      </label>
+      <label>
+        Имя вашего котика:
+        <input type="text" name="cat-name">
+      </label>
+    </form>
+  </div>
+</body>
+</html>
diff --git a/css/optional/index.md b/css/optional/index.md
index 8dc486ece8..1b05a86089 100644
--- a/css/optional/index.md
+++ b/css/optional/index.md
@@ -1,55 +1,102 @@
 ---
 title: "`:optional`"
-description: "Показываем, какие поля заполнять необязательно."
+description: "Показывает элементы формы, которые не обязательны для заполнения."
+baseline:
+  - group: form-validity-pseudos
+    features:
+      - css.selectors.optional
 authors:
   - inventoris
+contributors:
+  - drakesbot12
 keywords:
   - псевдокласс
+  - формы
+  - optional
+  - валидация
 related:
   - html/form
   - html/required
   - css/required
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко
 
-С помощью псевдокласса `:optional` можно выбрать элементы, заполнять которые необязательно. Это могут быть [`<input>`](/html/input/), [`<select>`](/html/select/) и [`<textarea>`](/html/textarea/) без атрибута [`required`](/html/required/).
+Псевдокласс `:optional` выбирает элементы формы, которые **не являются обязательными для заполнения**.
+
+Он применяется к:
+- [`<input>`](/html/input/)
+- [`<select>`](/html/select/)
+- [`<textarea>`](/html/textarea/)
+
+Если у элемента **нет атрибута [`required`](/html/required/)**, он считается необязательным и попадает под `:optional`.
 
 <aside>
 
-♻️ Существует псевдокласс с обратным значением: [`:required`](/css/required/). С его помощью можно выбрать обязательные к заполнению элементы.
+♻️ Противоположный псевдокласс — [`:required`](/css/required/), он выбирает обязательные поля формы.
 
 </aside>
 
 ## Пример
 
+```css
+input:optional {
+  border-color: #2e9aff;
+}
+```
+
 ```html
 <form>
-  <label>Имя вашего котика: <input></label>
+  <label>
+    Имя вашего котика:
+    <input type="text" name="cat-name">
+  </label>
+
+  <label>
+    Email:
+    <input type="email" name="email" required>
+  </label>
 </form>
 ```
 
-```css
-input:optional {
-  border-color: #d77d31;
-}
-```
+<iframe title="Демонстрация применения стилей :optional и :required" src="demos/basic/" height="200"></iframe>
 
 ## Как пишется
 
-Выбираем элемент без атрибута `required` и в селекторе используем `:optional`:
+Псевдокласс применяется к полям формы, у которых **не указан атрибут `required`**:
 
 ```css
-textarea:optional {
-  color: black;
+input:optional {
+  background-color: #fff8f1;
 }
 ```
 
 ## Как понять
 
-В формах важно визуально отмечать, какие поля следует обязательно заполнить, а какие можно пропустить. Так пользователям не придётся заполнять лишнее.
+Браузер автоматически определяет, какие поля формы обязательны для заполнения.
+
+- Если у элемента есть атрибут `required`, он считается обязательным
+- Если атрибута нет — поле считается необязательным и попадает под `:optional`
+
+Это позволяет:
+
+- визуально отделять важные поля от второстепенных
+- улучшать UX форм
+- уменьшать когнитивную нагрузку пользователя
+
+## Подсказки
+
+💡 Псевдокласс работает только с элементами формы, а не с любыми HTML-элементами.
+💡 `:optional` удобно использовать для стилизации второстепенных полей — например, дополнительных данных профиля.
+💡 Часто комбинируется с `:required`, чтобы явно разделить визуально важные и необязательные поля:
+```css
+input:required {
+  border-color: #2e9aff;
+}
 
-Псевдокласс `:optional` помогает улучшить опыт взаимодействия с формой. Визуально отмечаем, что нам не так уж нужно знать, и экономим драгоценное время и нервы пользователя.
+input:optional {
+  border-color: #d77d31;
+}
+```
