НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Поле ввода

Поле ввода принимает одну строку текста: имя, email, адрес сайта. Само по себе это голая рамка; чтобы у поля были подпись, подсказка и ошибки, оберните его в Field.

Стабильный Figma
ОбзорИспользованиеAPIДоступность 
<tk-field label="Email address" helper="We only use this for the receipt">
  <tk-input type="email" name="email" autocomplete="email"></tk-input>
</tk-field>

Анатомия

Часть Что это
tk-input сам элемент; одна остановка Tab
part field рамка поля
part input нативный <input> внутри
слот prefix текст или иконка перед значением, по желанию
слот suffix текст или иконка после значения, по желанию

Подпись, подсказку и сообщение об ошибке рисует Field, а не само поле.

Размеры

<tk-input aria-label="Medium input" value="Medium"></tk-input>
<tk-input aria-label="Large input" size="large" value="Large"></tk-input>
size Высота Отступ по бокам Текст значения
medium (по умолчанию) 32px space-8 Body Small (14/20)
large 36px space-10 Body Medium (16/24)
  • Высоты совпадают с кнопками medium и large, поэтому поле и кнопка рядом стоят ровно.
  • Размера small нет. С size="small" поле рисуется как medium и пишет предупреждение в консоль.
  • Поле занимает всю ширину контейнера. Подбирайте ширину под ожидаемый ответ: поле для индекса должно быть размером с индекс.

Состояния

<tk-input aria-label="Workspace URL" value="acme.thykes.com" readonly></tk-input>
<tk-input aria-label="Company" value="Acme Inc." disabled></tk-input>
<tk-field label="Email address" required error="Enter an email address, like name@example.com">
  <tk-input type="email" name="email" value="ada@"></tk-input>
</tk-field>

При наведении рамка не меняется. При фокусе она окрашивается в цвет фокуса и утолщается внутрь, так что ничего не сдвигается.

  • readonly: на поле можно перейти, значение можно выделить и скопировать, но не изменить. Выглядит как обычный текст. Подходит для значений, которые нужно прочитать или скопировать.
  • disabled: на поле нельзя перейти и нельзя ввести текст, а в форму оно не попадает. Лучше readonly или активное поле. Если поле нельзя изменить, объясните почему в подсказке.
  • Ошибка: задайте error у Field. Сообщение появится под полем, рамка станет красной и останется красной при фокусе.
  • Обязательное поле: задайте required у Field. У подписи появится звёздочка, а поле станет обязательным. Без Field ставьте required на само поле.

Поле не проверяет введённый текст, кроме встроенных проверок браузера (required, формат по type, maxlength). Когда проверять и что писать в ошибке, решаете вы.

Подпись, подсказка и ошибки

<tk-field label="Card number" helper="The 16 digits on the front of your card">
  <tk-input inputmode="numeric" name="card" autocomplete="cc-number"></tk-input>
</tk-field>
<tk-input aria-label="Filter by name"></tk-input>
  • Оберните поле в Field, чтобы дать ему подпись, подсказку или ошибку. Field называет поле для скринридеров.
  • Внутри Field задавайте required и disabled у Field. Field перезаписывает их у поля.
  • Если видимой подписи нет, задайте aria-label (или aria-labelledby) у поля. Только когда назначение поля понятно из того, что вокруг.
  • Каждому полю нужно одно из двух. Плейсхолдер никогда не заменяет подпись.

Префикс и суффикс

@ .thykes.com 
<tk-field label="Username">
  <tk-input name="username"><span slot="prefix">@</span></tk-input>
</tk-field>
<tk-field label="Workspace address">
  <tk-input name="workspace"><span slot="suffix">.thykes.com</span></tk-input>
</tk-field>
<tk-field label="Website">
  <tk-input type="url" name="website"><tk-icon slot="prefix" name="link"></tk-icon></tk-input>
</tk-field>
  • В prefix показывают, какое значение ждёт поле (@, $, иконка), в suffix — единицу или домен (USD, .example.com). В каждом слоте короткий текст или один tk-icon.
  • Префикс и суффикс скрыты от скринридеров. Не пишите там того, чего нет в подписи или подсказке.
  • Это украшение. Не кладите туда кнопки; кнопки очистки, счётчика символов и показа пароля нет.