Текстовое поле

Контракт

Поле, подпись и подсказка живут в одной обёртке inst-field.

Многострочное поле — тот же контракт, класс inst-textarea.

<label for> обязателен. placeholder подписью не является: он исчезает при вводе и не читается частью скринридеров. Подсказка вешается через aria-describedby на inst-field-hint. Сообщение об ошибке — текстом, а не только красной рамкой: цвет не имеет права быть единственным носителем. То же с обязательностью — required плюс видимая пометка, а звёздочка без словесного объяснения в начале формы это половина контракта.

Рамка поля берёт --border-control и держит 3:1: здесь граница и есть контрол.

Порядок состояний записан селектором: отключено > ошибка > фокус > наведение. У :hover:not(:disabled) специфичность (0,3,0), а у :user-invalid всего (0,2,0) — курсор над невалидным полем прятал красную рамку, пока наведение не начало уступать явно.

Размеры

Симметричны кнопочным, потому что поле и кнопка стоят в одной строке формы.

<input class="inst-input inst-input--sm" value="sm" aria-label="Поле sm">
<input class="inst-input" value="md" aria-label="Поле md">
<input class="inst-input inst-input--lg" value="lg" aria-label="Поле lg">
<textarea class="inst-textarea inst-textarea--sm" aria-label="Многострочное sm">sm</textarea>
<textarea class="inst-textarea" aria-label="Многострочное md">md</textarea>
<textarea class="inst-textarea inst-textarea--lg" aria-label="Многострочное lg">lg</textarea>

Горизонтальный отступ не меняется: у поля текст прижат к краю, а не отцентрован, поэтому отступу незачем расти вместе с высотой.

У inst-textarea те же три размера, высота — два с половиной контрола.

Состояния

<input class="inst-input" value="Обычное" aria-label="Обычное">
<input class="inst-input" value="Только чтение" readonly aria-label="Только чтение">
<input class="inst-input" value="Недоступно" disabled aria-label="Недоступно">
<input class="inst-input" value="Ошибка" aria-invalid="true" aria-label="Ошибка">

readonly — не disabled

Это разные вещи, и пока они выглядели одинаково, пользователь не мог понять, ждать ему разблокировки или значение неизменяемо в принципе.

Поведение

Валидация

Ошибку показывает платформа.

<div class="inst-field">
  <label class="inst-label" for="mail">Почта<span class="inst-required">*</span></label>
  <input class="inst-input" id="mail" type="email" required
         aria-describedby="mail-msg">
  <span class="inst-field-hint" id="mail-msg">Пришлём отчёт о прогоне</span>
  <span class="inst-field-error" data-when="invalid">Проверьте адрес</span>
</div>

:user-invalid, а не :invalid. Разница принципиальная: :invalid горит красным с первой секунды, ещё до того, как в поле что-то ввели, — форма встречает пользователя россыпью ошибок, которых он не совершал. :user-invalid срабатывает только после взаимодействия.

Подсказка и ошибка занимают один слот. Ошибка заменяет подсказку, а не сдвигает форму: разметка не перекладывается в момент заполнения.

Композиции

Приставка и суффикс

<div class="inst-input-group">
  <span class="inst-input-affix">₽</span>
  <input class="inst-input" aria-label="Бюджет">
  <span class="inst-input-affix">в час</span>
</div>

Подпись сбоку

<div class="inst-field inst-field--side">
  <label class="inst-label" for="t">Таймаут</label>
  <input class="inst-input" id="t" value="30">
</div>

Колонка подписей — тот же --label-col, что у инспектора: два способа показать пару «имя — значение» не имеют права разъезжаться по метрике.

API

Связанное

ПоискЧисловое поле инспектораСелектCascaderФормаПоле файлаВставкиСлайдерПоле ввода