Segmented Radio Group
SegmentedRadioGroup — это набор из двух и более кнопок, расположенных в ряд и объединенных в группу, работающую по принципу переключателей диапазонов в радиоприемниках. Такие кнопки также часто называют Segmented-control, чтобы не путать их с переключателями Radio.
Применение
SegmentedRadioGroup используется для выбора из двух и более опций при заполнении формы, фильтрации списка или таблицы, переключения внешнего вида страницы или режима работы инструмента. Этот компонент удобен тем, что, в отличие от выпадающего списка, все опции сразу видны пользователю.
Опции в SegmentedRadioGroup должны быть близкими по контексту и быть взаимоисключающими.
Количество опций должно быть небольшим (следует ориентироваться на 2-5), а сами они должны иметь короткие наименования (рекомендуется до трех слов).
При инициализации SegmentedRadioGroup по умолчанию обязательно должна быть выбрана какая-либо опция.
Когда применять не стоит
Если возможен множественный выбор, лучше использовать чекбокс (Checkbox) или выпадающий список (Select).
Для выбора из опций вида «Да» / «Нет» или «Включено» / «Выключено» лучше использовать чекбокс или переключатель (Switch).
Если опций больше 5-6 или они имеют длинные наименования, следует использовать группу радио-переключателей (Radio) или выпадающий список.
Неправильно использовать SegmentedRadioGroup для навигации на странице или индикатора прогресса (к примеру, в мастере). Для навигации на странице следует использовать группу вкладок (Tabs).
Размеры
Стандартный размер для десктопа — M, для мобильных интерфейсов — XL. Остальные размеры используются при необходимости, например, чтобы визуально соответствовать другим элементам на странице или в диалоге.
Кроме высоты кнопок, размеры отличаются внутренними отступами в кнопках, радиусами скруглений и размером шрифта.
Кнопки с опциями могут быть разной ширины и подгоняться под содержимое (Auto width), либо быть одинаковой ширины, при этом делить ширину контейнера поровну (Max width).
Последний вариант используется, когда длина наименований у опций мало отличается, в противном случае наименования могут выходить за пределы кнопок.
В целом следует стремиться к тому, чтобы кнопки внутри SegmentedRadioGroup были одинакового размера даже в режиме Auto, в таком случае весь элемент выглядит сбалансированным.
Контент
Кроме текста (Label) кнопки опционально содержат иконку и счетчик. Как и в элементе Button, иконка может показываться вместе с текстом (Icon and Label) или без него (Icon only). Не следует смешивать в одном SegmentedRadioGroup кнопки с разным типом контента.
Счетчик (Counter) дает информацию пользователю о количестве объектов внутри опции.
Текст на кнопках внутри SegmentedRadioGroup должен начинаться с заглавной буквы. Текст не должен содержать повторяющуюся часть и обрезаться многоточием.
В варианте только с иконками при наведении указателя мыши над кнопками обязательно должны показываться тултипы (Tooltip) с наименованиями кнопок.
В формах рекомендуется использовать вариант с текстом или текстом и иконкой. Вариант только с иконкой используется в основном для переключения вида или выбора из опций в хорошо знакомой пользователю ситуации, — например, для переключения между списком и миниатюрами объектов или для выбора форматирования в редакторе.
Состояния
Кроме основного состояния (Default), кнопки могут быть в выбранном (Selected) и/или неактивном (Disabled) состоянии. Кнопки также имеют состояние при наведении (Hover). Выбранной может быть только одна кнопка.
