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

Country select

Country select позволяет выбрать одну страну: человек печатает, и список фильтруется. Полный список стран, их названия на языке пользователя и флаги уже встроены; значение — двухбуквенный код страны.

Стабильный Figma
ОбзорИспользованиеAPIДоступность 
<tk-field label="Country">
  <tk-country-select name="country"></tk-country-select>
</tk-field>

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

Анатомия

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

Страны и названия

<tk-country-select aria-label="Pays" locale="fr" value="DE"></tk-country-select>
  • В списке все 249 стран и территорий ISO 3166-1, а также Косово (XK).
  • Названия берутся из браузера на языке страницы (lang на <html>), а если он не задан, на языке браузера. locale задаёт язык для одного поля; список пересортируется под него.
  • Значение — двухбуквенный код alpha-2 заглавными буквами, например GB или US. value строчными буквами преобразуется. Храните и отправляйте код, а не название.
  • Флаги загружаются, когда первый из них появляется на экране, из файлов самой библиотеки. До загрузки их место остаётся пустым, поэтому ничего не сдвигается.

Фильтрация

  • Введите часть названия, в любом регистре и с любого места: «kingdom» найдёт «United Kingdom».
  • Диакритика не важна: «curacao» найдёт «Curaçao».
  • Подходит и двухбуквенный код: «gb» найдёт United Kingdom.
  • Ничего не выбирается, пока человек сам не выберет пункт. При уходе из поля возвращается выбранная страна. Добавить страну, которой нет в списке, нельзя.

Телефонные коды

<tk-field label="Phone country">
  <tk-country-select dial-code value="NL"></tk-country-select>
</tk-field>

dial-code добавляет к названию телефонный код: «Netherlands (+31)». Тогда по цифрам, например «44», страны ищутся по коду. У территорий без телефонного кода его нет.

Компактный вид

<tk-country-select
  compact
  dial-code
  aria-label="Country calling code"
  autocomplete="tel-country-code"
  value="US"
></tk-country-select>

compact сжимает поле до флага и телефонного кода, чтобы поставить его рядом с полем номера. Используйте вместе с dial-code. Кнопка очистки скрыта, а меню остаётся достаточно широким для полных названий. В поле помещается около пяти символов, поэтому введённое название в нём прокручивается; совпадения читайте в меню. При фокусе код выделяется, и ввод его заменяет.

Компактному полю давайте имя через aria-label: видимая подпись над ним называла бы весь ряд. bare дополнительно убирает рамку, фон, рамку фокуса и шеврон, чтобы поле можно было встроить в рамку другого поля. Phone input делает всё это сам.

Размеры

<tk-country-select aria-label="Country" value="JP"></tk-country-select>
<tk-country-select size="large" aria-label="Country" value="JP"></tk-country-select>
size Высота Текст Флаг
medium (по умолчанию) 32px Body Small (14/20) 24×16px
large 36px Body Medium (16/24) 30×20px

Состояния

<tk-country-select aria-label="Country" value="IT" disabled></tk-country-select>
<tk-country-select aria-label="Country" value="IT" readonly></tk-country-select>

Состояния те же, что у Combobox. При наведении поле не меняется; при фокусе с клавиатуры рамка меняет цвет и становится толще.

  • disabled: на поле нельзя перейти, его нельзя открыть, значение не отправляется.
  • readonly: страна видна и отправляется, но изменить её или открыть меню нельзя. Флаг остаётся; кнопка очистки и шеврон скрыты.
  • Ошибка: задайте error на Field.