▸ 01 · СОСТОЯНИЯ ОДНОГО ПОЛЯ

Все 7 состояний `.form-input`

empty · :focus · filled · is-invalid · is-valid · :disabled · .is-loading

// empty (placeholder visible)
Состояние по умолчанию — нейтральная серая граница.
// filled
Заполненное значение видно, граница нейтральная.
// is-invalid (красная граница + сообщение)
Неверный формат email
// is-valid (зелёная граница + ✓)
Корректный формат
// :disabled
Поле недоступно для редактирования.
// .is-loading (амбер-спиннер)
Идёт асинхронная проверка на сервере.
▸ 02 · ЖИВАЯ ПРОВЕРКА

Форма с авто-валидацией на лету

Ошибки появляются после первого ухода с поля (blur), затем обновляются при каждом вводе. Нажми «Отправить» — невалидные поля подсветятся.

Подсказка остаётся видимой пока поле валидное.
▸ 03 · ПРОВЕРКА

Светлая тема

Кликни на иконку 🌓 в шапке для переключения темы — все состояния полей должны быть читаемы в обеих темах. На светлой: bone surface · #0A0A0A type · deep bronze #998018 акценты · #B91C1C/#15803D вместо ярко-красного/зелёного для контраста.