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

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

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

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

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

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

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

Название

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

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

Переключатель с подписью «Отчёт» и пунктами «За месяц», «За квартал», «За год», выбран первый

Неправильно

Переключатель с подписью «Отчёт за» и пунктами «Месяц», «Квартал», «Год», выбран первый

Правильно

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

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

Переключатель с подписью «Отчёт за»: названия первых двух пунктов обрезаны многоточием — «Мес…», «Ква…», третий пункт «Год»

Неправильно

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

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

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

Переключатель с пунктами «Светлая», «Системная», «Тёмная», выбран средний — «Системная»

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

Дизайн

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

Переключатель «Месяц», «Квартал», «Год» с пунктами одинаковой ширины: у короткого «Год» поля по бокам от текста намного шире, чем у «Квартал»

Неправильно

Переключатель «Месяц», «Квартал», «Год»: ширина пунктов по тексту, отступы от текста до краёв у всех одинаковые

Правильно

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

Заблокированный переключатель «Месяц», «Квартал», «Год»: все пункты серые, ни один не выбран

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

Заблокированный переключатель с выбранным пунктом «Месяц»: он залит тёмно-серым, у остальных пунктов серый текст

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

Переключатель «Месяц», «Квартал», «Год», в котором заблокирован только пункт «Месяц»: он серый, остальные доступны, ничего не выбрано

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

Переключатель, в котором заблокирован выбранный пункт «Месяц»: он залит серым со светлым текстом, «Квартал» и «Год» доступны

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

Валидация

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

Переключатель «Месяц», «Квартал», «Год» без выбранного пункта в красной рамке, справа красный текст «Выберите один из вариантов»

Доступность

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

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

Переключатель «Светлая», «Системная», «Тёмная» в фокусе — вокруг выбранного пункта «Светлая» чёрная рамка

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

Переключатель с выбранным пунктом «Светлая»: фокусная рамка сначала на пункте «Системная», затем на «Тёмная»

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