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

Select

Select позволяет выбрать один пункт из короткого закрытого списка. Он показывает выбранное значение и отправляет его вместе с формой.

Стабильный Figma
ОбзорИспользованиеAPIДоступность 
<tk-field label="Department" helper="Shown on your profile">
  <tk-select name="department" placeholder="Select a department">
    <option>Design</option>
    <option>Engineering</option>
    <option>Finance</option>
  </tk-select>
</tk-field>

Поместите select в Field, чтобы у него были подпись, подсказка и ошибка. Без Field задайте aria-label. Внутри Field ставьте required и disabled на Field.

Анатомия

Часть Что это
tk-select сам элемент; одна остановка Tab
поле показывает выбранное значение или приглашение и шеврон; занимает ширину контейнера
шеврон переворачивается, пока меню открыто; скрыт в режиме только для чтения
меню список пунктов; ширина как у поля; открывается под полем, а у нижнего края экрана над ним
пункт одна строка; выбранный отмечает галочка
заголовок группы необязательный заголовок над несколькими пунктами; его нельзя выбрать

В меню видно примерно пять с половиной строк, дальше оно прокручивается; обрезанная строка показывает, что ниже есть ещё. На сенсорных экранах открывается то же меню, системного списка нет.

Варианты

<tk-select variant="filter" filter-label="Status">
  <option>Open</option>
  <option>Closed</option>
</tk-select>
<tk-select variant="filter" filter-label="Owner">
  <option selected>Me</option>
  <option>Anyone</option>
</tk-select>
  • field (по умолчанию): поле формы на всю ширину контейнера. Назовите его через Field или aria-label.
  • filter: компактная кнопка для панели фильтров. Пока ничего не выбрано, на ней написано «Status», потом «Status: Open», и кнопка получает тонированную заливку. filter-label обязателен: это и видимый текст, и доступное имя. Фильтр не кладут в Field.

Размеры

<tk-select aria-label="Sort by">
  <option selected>Newest first</option>
  <option>Oldest first</option>
</tk-select>
<tk-select size="large" aria-label="Show">
  <option selected>All projects</option>
  <option>Starred projects</option>
</tk-select>
size Высота Отступ по бокам Текст значения Строка пункта
medium (по умолчанию) 32px space-8 Body Small (14/20) 32px
large 36px space-10 Body Medium (16/24) 36px

Текст пунктов в обоих размерах Label Medium (14/20). Строка с описанием выше. Высоты совпадают с Input и Button, поэтому форма выстраивается в ряд. Длинные значения и пункты обрезаются многоточием и не переносятся.

Состояния

<tk-select aria-label="Region" disabled>
  <option selected>Europe</option>
</tk-select>
<tk-select aria-label="Currency" readonly>
  <option selected>Euro</option>
</tk-select>

При наведении поле не меняется. При фокусе с клавиатуры его рамка меняет цвет и становится толще; отдельной рамки фокуса снаружи нет. Вариант filter при наведении тонируется и при фокусе показывает рамку фокуса.

  • disabled: на поле нельзя перейти, меню не открывается, значение не отправляется. Лучше оставить поле активным или сделать его readonly и объяснить причину в подсказке.
  • readonly: значение видно и отправляется. На поле можно перейти, но меню не открывается и шеврон скрыт.
  • Ошибка: задайте error на Field. Сообщение появится ниже, а рамка станет красной, даже в фокусе.
<tk-field label="Plan" required error="Select a plan to continue">
  <tk-select placeholder="Select a plan">
    <option>Free</option>
    <option>Pro</option>
  </tk-select>
</tk-field>

Пункты списка

<tk-select aria-label="Plan" placeholder="Select a plan">
  <option value="free" data-description="For trying things out">Free</option>
  <option value="pro" data-description="Adds version history">Pro</option>
  <option value="team" disabled>Team (coming soon)</option>
</tk-select>
  • Пункты пишутся дочерними <option>. Если value не задан, значением становится текст пункта.
  • Начальное значение задаёт selected на пункте или value на select. Без них поле показывает приглашение; первый пункт сам не выбирается.
  • disabled оставляет пункт видимым, но пропускает его. Напишите в тексте, почему он недоступен.
  • data-description добавляет короткую вторую строку. Пишите туда то, что помогает выбрать, например цену или лимит. Не описывайте каждый пункт. Скринридер читает описание после названия пункта.
<tk-select aria-label="Office" placeholder="Select an office">
  <option>Remote</option>
  <optgroup label="Europe">
    <option>Berlin</option>
    <option>Lisbon</option>
  </optgroup>
</tk-select>

<optgroup label="…"> объединяет пункты под заголовком. Клавиатура пропускает заголовки. Другие дочерние элементы игнорируются.