Правильно
Компонент следует модели выбора
Короткие режимы видны в segmented-control, один вариант — radio, несколько — checkbox-group.
Группа выбора
Паттерн сначала фиксирует модель выбора — один, несколько или режим, — и только затем выбирает компонент. Все варианты получают общее доступное имя.
Статус: experimental · в системе с 2026-07
Когда использовать
- Пользователь выбирает один или несколько вариантов из известного набора.
- Важно сравнить варианты до подтверждения.
Не использовать:
- Значение вводится свободным текстом.
- Единственное булево значение меняется мгновенно — это
switch.
Состав
| Юнит или компонент | Роль |
|---|---|
radio | Ровно один вариант из видимого набора. |
checkbox-group | Несколько независимых вариантов. |
segmented-control | Один режим из короткого ряда 2–6 вариантов. |
toggle-group | Один или несколько компактных режимов с возможностью снять выбор. |
select | Один вариант из длинного списка, который не нужно видеть целиком. |
Ограничения
- Обязательно: Определять модель выбора до выбора компонента: single, multiple или mode.
- Обязательно: Давать группе общее видимое и доступное имя.
- Обязательно: Сохранять один способ выбора внутри группы и явно показывать текущее значение.
- Запрещено: Смешивать radio и checkbox в одной логической группе или использовать select для 2–3 коротких режимов.
Логика отклика
- Контекст Пользователь читает вопрос группы. Общее имя объясняет, что именно выбирается.
- Сравнение Пользователь просматривает доступные варианты. Видимость вариантов соответствует длине и цене сравнения.
- Выбор Пользователь меняет один или несколько пунктов. Состояние читается формой, текстом и ARIA, а не одним цветом.
Контекстный пример
Неправильно
Одинаковый select для любого набора
Два важных варианта спрятаны, multiple выглядит как single, а у группы нет общего имени.
Скелет экрана
legendОбщий вопрос или имя группы.optionsНабор вариантов в одном паттерне взаимодействия.supportПодсказка или ошибка группы, связанная со всеми вариантами.