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

Search field

Search field принимает поисковый запрос. В нём есть иконка поиска, кнопка очистки и состояние загрузки. Сам он ничего не ищет: запрос выполняете и результаты показываете вы.

Стабильный Figma
ОбзорИспользованиеAPIДоступность 
<form action="/search">
  <tk-search-field name="q" label="Search invoices" placeholder="Invoice number or customer"></tk-search-field>
</form>

Анатомия

Часть Что это
tk-search-field сам элемент; отправляет одно значение под именем name
part field рамка поля
иконка поиска украшение; при loading её заменяет спиннер
part input нативный <input type="search">
part clear кнопка очистки; появляется, когда есть текст, и получает фокус

Подпись

<tk-search-field label="Search orders"></tk-search-field>
<tk-field label="Find a customer" helper="Name, email, or account ID">
  <tk-search-field name="customer"></tk-search-field>
</tk-field>
  • Видимой подписи у search field нет. Он называет себя по label, по умолчанию «Search». Напишите, что именно ищут: label="Search orders".
  • Для видимой подписи, подсказки или ошибки оберните поле в Field. Тогда поле называет подпись Field, а label задавать не нужно.

Размеры

<tk-search-field label="Search files"></tk-search-field>
<tk-search-field label="Search files" size="large"></tk-search-field>
size Высота Отступы по бокам Текст значения
medium (по умолчанию) 32px space-8 в начале, space-4 в конце Body Small (14/20)
large 36px space-10 в начале, space-4 в конце Body Medium (16/24)

Высоты совпадают с кнопками medium и large. Размера small нет: с size="small" поле рисуется как medium и пишет предупреждение в консоль.

Состояния

<tk-search-field label="Search invoices" value="March" loading></tk-search-field>
<tk-search-field label="Search invoices" disabled></tk-search-field>

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

  • loading: спиннер заменяет иконку поиска, а поле сообщает скринридерам, что идёт загрузка. Кнопка очистки остаётся, чтобы запрос можно было отменить, очистив поле.
  • disabled: на поле нельзя перейти и нельзя ввести текст, кнопка очистки скрыта, а в форму поле не попадает.
  • Ошибка и обязательность: задайте error и required у Field.

Очистка

  • Кнопка очистки и Escape очищают поле. Фокус переходит в текст и не теряется.
  • Escape срабатывает, только когда есть текст. В Dialog или Popover первый Escape очищает поле, а второй закрывает окно.
  • При очистке приходят input, change и tk-clear. В tk-clear поле detail.reason говорит, как очистили: button или escape. Отменить очистку нельзя.

Поле только хранит запрос. Когда искать, сколько ждать и как сообщить о найденном, решаете вы:

<tk-search-field id="filter" label="Filter sections"></tk-search-field>
<p id="count" role="status"></p>
<script>
  const field = document.getElementById('filter');
  field.addEventListener('input', debounce(() => render(field.value), 200));
  field.addEventListener('tk-clear', () => render(''));
</script>
  • Слушайте input, пока человек печатает, change, когда он подтвердил ввод, или submit формы по Enter.
  • Встроенной задержки нет; ждите столько, сколько нужно вашему поиску.
  • Сообщайте число результатов в своей области role="status", например «12 результатов».