Система ввода

Поля, выбор, состояния и проверка

01 · Система ввода

Один контракт для любого способа ввода

Input, Select, Textarea, Checkbox, Radio и Switch решают разные задачи, но одинаково проходят путь от понятного запроса до проверенного результата.

Поток взаимодействия

От контекста к результату

01КонтекстLabel и подсказка объясняют ожидаемый ответ.
02ВводНативный контрол сохраняет клавиатуру и семантику.
03ПроверкаОшибка или успех сопровождаются понятным текстом.
04РезультатФокус остаётся предсказуемым, а данные сохраняются один раз.

Состояния

Состояние нельзя передавать только цветом

hoverПоказывает интерактивность, но не заменяет фокус.
focus-visibleВсегда остаётся заметным для клавиатуры.
is-errorСвязано с конкретным сообщением через aria-describedby.
is-successИспользуется только для полезного подтверждения.
disabledИсключает контрол из взаимодействия и отправки.
readonlyОставляет значение доступным для чтения и копирования.

Выбор контрола

Форма следует типу ответа

InputКороткое значение или поиск.

SelectОдин вариант из заранее известного списка.

CheckboxНезависимые варианты или согласие.

RadioОдин обязательный вариант из небольшой группы.

SwitchНастройка, которая применяется сразу.

TextareaСвободный многострочный ответ.

Готовую разметку и классы смотрите в статье «Поля формы».

Доступность

Имя, связь и фокус обязательны

LabelКаждый контрол получает доступное имя.
ГруппаСвязанные варианты объединяются через fieldset и legend.
ОписаниеПодсказки и ошибки связываются с полем через aria-describedby.
ОшибкаНевалидное поле получает aria-invalid и текстовое объяснение.
ФокусПорядок клавиатуры соответствует визуальному порядку.