Switcher

Общая информация

Switcher (select button) — это компонент для выбора функционала без перезагрузки страницы с помощью элементов ghost button. Может являться заменой группе радиокнопок.

Описание работы

Если переключатель используется для настройки параметров и показывает текущее состояние системы, один из пунктов переключателя должен быть выбран по умолчанию. При желании пользователь сможет вернуть настройку в исходное состояние. Выбранный по умолчанию пункт ставьте первым в списке.

Если переключатель нужен для сообщения каких-то сведений, то по умолчанию может быть не выбран ни один из вариантов.

Одновременно может быть выбран только один пункт. Когда пользователь выбирает новый элемент, предыдущий выбор автоматически отменяется.

Старайтесь не использовать переключатель из двух значений — пользователи не понимают, какой из пунктов выбран.

Когда использовать

Переключатель используют, когда вариантов выбора немного: от трех до пяти
Не используйте переключатель в качестве навигации, для этого лучше подходят табы

Оформление

Текст

Название переключателя пишут с заглавной буквы и формулируют так, чтобы:

Было понятно, что можно выбрать только 1 вариант

Название каждого пункта не содержало повторяющуюся часть

Избегайте названий пунктов из 3 и более слов. Если сократить названия не получается, используйте группу радиокнопок.

Так же название пеключателя может содержать текст с иконкой:

Иконки

В случае когда мало места, можно использовать иконки вместо текста:

Размеры

Внешние размеры

Высота переключателя зависит от выбора размера элемента button (inner - 44px, 36px; outer - 40px, 32px, 24px). Ширина переключателя зависит от контента кнопок-переключателей. Минимальная ширина одной кнопки переключателя 120 px.

Внутренние размеры

Вертикальные паддинги:

Горизонтальные паддинги:

Состояния (State)

Существует 3 основных состояния кнопок-переключателей:

Default — по умолчанию (состояние покоя)
Hover — при наведении курсора
Pressed — выбранное состояние

Фокус (Focus)

Так же существует состояние Focus. Он появляется в момент выбора кнопки-переключателя с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с состоянием Default, Hover и Pressed.

Взаимодействие с клавиатуры

Рамка фокуса появляется при переходе к переключателю клавишей Tab. С помощью клавиш ← и → переключается фокус между пунктами. Нажатие на Enter, выбирает пункт переключателя, на котором сейчас фокус.

Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.