ДокументацияРазделы, компоненты, системы и их подразделы
Поля формы
Input, элементы выбора, Select и Textarea
Система ввода
Поля формы помогают ввести, выбрать и проверить данные
Выбирайте контрол по характеру ответа: короткий текст, видимые варианты, значение из списка или развёрнутая мысль.
01 · Короткий вводInputИмя, email, поиск и одно значение
02 · Видимый выборCheckbox · Radio · SwitchНезависимые варианты, один ответ или настройка
03 · Готовый списокSelectОдно значение из нескольких вариантов
04 · Развёрнутый вводTextareaКомментарий, описание или обратная связь
01 · Короткий ввод
Обычное поле предназначено для короткого значения
Видимая подпись объясняет назначение, type задаёт нативное поведение, placeholder показывает формат, но не заменяет label.
Prefix, suffix и размеры
Дополнение помогает понять формат, но не должно становиться единственным носителем важной информации. Размер задаётся на wrapper.
HTMLПоле с prefix
<label>
<span>Адрес сайта</span>
<span class="form-control-wrap">
<span class="form-prefix">https://</span>
<input class="form-control" type="text" placeholder="example.com">
</span>
</label>Состояние ставится на wrapper
Цвет всегда дополняется текстом, связанным с полем через aria-describedby.
.form-control-wrap.is-success.form-control-wrap.is-error.form-control-wrap.is-disabled02 · Видимый выбор
Checkbox отмечает независимые варианты
Подпись кликабельна вместе с контролом. checked, focus и disabled обрабатываются нативными состояниями input.
HTMLCheckbox
<div class="form-check">
<input class="form-check-input" id="receive-reports" type="checkbox" checked>
<label class="form-check-label" for="receive-reports">Получать отчёт</label>
</div>Radio выбирает один ответ, Switch меняет настройку сразу
Radio объединяется одинаковым name и получает legend. Switch не подходит значению, которое применится только после отправки формы.
03 · Готовые варианты
Select выбирает значение из готового списка
Для двух–четырёх важных вариантов используйте radio. Optgroup помогает просматривать более длинный, но всё ещё обозримый список.
HTMLSelect с иконкой
<span class="form-select-wrap">
<select class="form-select">
<option selected disabled>Выберите роль</option>
<option>Редактор</option>
</select>
<span class="form-select-icon" aria-hidden="true">⌄</span>
</span>Размеры и проверка Select
Размер и состояние задаются на form-select-wrap. У нативного select нет readonly: показывайте значение текстом или disabled-полем.
.form-select-wrap.form-sm.form-select-wrap.form-lg.form-select-wrap.is-success.form-select-wrap.is-error04 · Многострочный ввод
Textarea даёт место для развёрнутой мысли
Placeholder показывает пример содержания, а счётчик нужен только при реальном ограничении maxlength.
HTMLTextarea со счётчиком
<span class="form-textarea-wrap">
<textarea class="form-textarea" maxlength="500"
aria-describedby="description-help description-counter"></textarea>
<span class="form-counter" id="description-counter">0 / 500</span>
</span>Ошибка, успех и readonly Textarea
Ядро разрешает вертикальный resize. Автоматический рост и динамический счётчик остаются прикладным поведением проекта.
.form-textarea-wrap.is-error.form-textarea-wrap.is-success.form-textarea-wrap.is-readonlyresize: verticalОбщий контракт доступной формы
Нативная семантика сохраняет клавиатуру, мобильные клавиатуры, picker и объявления screen reader.
labelДаёт полю видимое имя и увеличивает область нажатия.fieldset + legendОписывают смысл группы radio или checkbox.aria-describedbyСвязывает подсказку, счётчик или ошибку с контролом.aria-invalid="true"Сообщает ошибку проверки.role="switch"Передаёт смысл мгновенного переключателя.disabled / readonlyРазличают недоступное поле и доступный для копирования текст.