Переключатель Switcher

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

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

Используйте переключатель, когда вариантов выбора немного: от трёх до пяти.

Используйте переключатель, а не радиокнопки, чтобы сделать интерфейс компактнее.

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

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

Название

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

  • было понятно, что можно выбрать только 1 вариант;
  • название каждого пункта не содержало повторяющуюся часть.

Неправильно

Правильно

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

Нельзя сокращать название пункта, если оно не входит:

Неправильно

Выбор по умолчанию

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

Нельзя сокращать название пункта, если оно не входит:

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

Управление клавиатурой

При переходе к переключателю клавишей Tab выбранный пункт получает фокус — появляется чёрная рамка:

С помощью клавиш и переключается фокус между пунктами:

Нажатие на Enter выбирает пункт переключателя, на котором сейчас фокус.

Валидация

В переключателе не должно быть пунктов, которые нельзя выбрать. Единственное, для чего может использоваться валидация, — указывать на обязательность самого выбора.

Дизайн

Все отступы должны быть одинаковыми:

Неправильно

Правильно

При необходимости переключатель может быть заблокирован.

Переключатель может быть заблокирован, даже если один из вариантов уже был выбран.

Можно заблокировать один элемент.

Элемент не перестаёт быть выбранным, если блокируется.

Если выбрать другой вариант, то выбор с заблокированного снимается.