Карточка выбора
Карточка выбора — крупный вариант, в котором есть место для описания, иконки или цены. Вся карточка нажимается целиком, а выбирает tk-radio или tk-checkbox внутри неё.
<tk-radio-group label="Choose your plan" name="plan" value="starter">
<tk-selection-card>
<tk-icon slot="media" name="user"></tk-icon>
<tk-radio slot="control" value="starter" helper="For one person, $9 a month">Starter</tk-radio>
<span slot="meta">$9/mo</span>
</tk-selection-card>
<tk-selection-card>
<tk-icon slot="media" name="star"></tk-icon>
<tk-radio slot="control" value="pro" helper="For growing teams, $29 a month">Pro</tk-radio>
<span slot="meta">$29/mo</span>
</tk-selection-card>
</tk-radio-group>Анатомия
| Часть | Что это |
|---|---|
tk-selection-card |
карточка с рамкой; вся она — одна область нажатия |
слот control |
tk-radio или tk-checkbox, обязателен. Его подпись — заголовок карточки и доступное имя, его helper — описание |
слот media |
необязательная иконка или картинка перед заголовком; скринридер её пропускает |
слот meta |
необязательная цена или бейдж после заголовка; скринридер их пропускает |
Режим задаёт вложенный элемент: кружок значит «один из», квадрат — «любые». Не смешивайте их в одной группе.
Карточки с чекбоксами
<tk-checkbox-group label="Add features">
<tk-selection-card>
<tk-checkbox slot="control" name="features" value="analytics" helper="Dashboards and exports">Analytics</tk-checkbox>
</tk-selection-card>
<tk-selection-card>
<tk-checkbox slot="control" name="features" value="backups" helper="Daily, kept for 30 days" checked>Backups</tk-checkbox>
</tk-selection-card>
</tk-checkbox-group>Каждая карточка с чекбоксом — отдельная остановка Tab и отправляет name и value своего
чекбокса. Карточки с радиокнопками делят одну остановку Tab группы и её value.
Положение элемента выбора
control-position="trailing" ставит элемент выбора в конец, после заголовка. По умолчанию,
leading, он идёт первым. media всегда в начале, meta всегда в конце.
<tk-radio-group label="Shipping" name="shipping" value="standard">
<tk-selection-card control-position="trailing">
<tk-radio slot="control" value="standard" helper="3 to 5 business days">Standard</tk-radio>
</tk-selection-card>
<tk-selection-card control-position="trailing">
<tk-radio slot="control" value="express" helper="Next business day">Express</tk-radio>
</tk-selection-card>
</tk-radio-group>Состояния
<tk-radio-group label="Account type" name="account" value="personal">
<tk-selection-card>
<tk-radio slot="control" value="personal">Personal</tk-radio>
</tk-selection-card>
<tk-selection-card disabled>
<tk-radio slot="control" value="business" helper="Not available in your region">Business</tk-radio>
</tk-selection-card>
</tk-radio-group>При наведении рамка становится заметнее, а карточка подкрашивается. При фокусе с клавиатуры на элементе выбора вокруг всей карточки появляется одна рамка.
- Выбрана: рамка заметнее и подкраска, плюс галочка или точка самого элемента. Выбор
задают на элементе (
checked) или на группе (value), но не на карточке. disabled: отключает элемент выбора и приглушает карточку. Отключённая группа тоже приглушает свои карточки. Объясните причину в описании или уберите вариант.- Ошибка и обязательность: ставьте на группу. Сообщение появляется над карточками, а карточки цвет не меняют.
Когда использовать
- Карточки выбора — когда варианту нужно больше одной строки: описание, иконка, цена.
- Чтобы выбрать ровно один вариант, кладите внутрь
tk-radio, а карточки — вRadio group . - Чтобы выбрать сколько угодно, кладите внутрь
tk-checkbox, а связанные карточки — вCheckbox group . - Для вариантов в одну строку берите обычную радиокнопку или чекбокс.
- Для длинного списка берите
Select илиCombobox . - Не кладите в карточку
Switch . Переключатели верстают строками настроек.
Текст
- Заголовок — это подпись элемента выбора: назовите вариант коротко, с заглавной только в начале, без точки в конце. У карточки с чекбоксом выбор значит «включено».
- Описание — это
helperэлемента выбора: одно короткое предложение, без точки и без ссылок. - В
meta— только цена или короткая метка. Скринридер её пропускает, поэтому значение, от которого зависит выбор, например цену, повторите в заголовке или описании. - Подпись группы — вопрос или категория, одним предложением.
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
tk-radio для одного выбора, tk-checkbox для нескольких |
Карточки с радиокнопками и чекбоксами в одной группе |
| Заголовок в подписи элемента выбора | Отдельный заголовок, а элемент без имени |
| Вся карточка — область нажатия | Ссылка или кнопка внутри карточки |
| Ошибка и обязательность на группе | Красить карточку из-за ошибки группы |
| Обычная радиокнопка или чекбокс для вариантов в одну строку | Оборачивать в карточку каждую мелочь |
| Переключатель строкой настроек | Переключатель в карточке |
Связанные
Radio group : элемент для карточек с радиокнопками и его группа.Checkbox : элемент для карточек с чекбоксами и его группа.Switch : настройка вкл/выкл; верстайте её строкой, а не карточкой.
API
Атрибуты
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
control-position |
leading | trailing |
leading |
ставит элемент выбора первым или последним |
disabled |
boolean | false |
отключает элемент выбора и приглушает карточку |
Слоты
| Слот | Содержимое |
|---|---|
control |
один tk-radio или tk-checkbox, обязателен |
media |
необязательная иконка или картинка перед заголовком |
meta |
необязательная цена или бейдж после заголовка |
События
Своих событий нет. Слушайте change у чекбокса или у радиогруппы.
CSS
::part(card): поверхность карточки, область нажатия.
Токены
| Состояние | Рамка | Поверхность |
|---|---|---|
| покой | border/subtle |
surface/default |
| наведение | border/strong |
state/hover |
| выбрана | border/selected |
state/on; при наведении state/on-hover |
| отключена | border/disabled |
surface/disabled |
Рамка фокуса border/accent/focus. Заголовок, описание и галочка берут токены самого
элемента выбора. Углы карточки radius-12, отступы и промежутки space-16. Значения по
темам:
Доступность
Встроено:
- Всю работу делает элемент внутри: его подпись называет карточку, его группа даёт клавиатуру и значение формы, а скринридер слышит обычную радиокнопку или чекбокс.
- Нажатие в любом месте карточки выбирает элемент один раз.
- Одна рамка фокуса вокруг всей карточки, которая никогда не прячется.
- Выбор виден без цвета: по галочке или точке элемента и по рамке карточки.
На вашей стороне:
- Заголовок пишите в подписи элемента выбора, описание — в его
helper. - Не кладите в карточку ссылку или кнопку: вся карточка — одна цель.
- Ошибку и обязательность ставьте на группу, а не на карточку.
| Элемент | Клавиатура |
|---|---|
| карточка с чекбоксом | Tab доходит до каждой карточки; Space отмечает или снимает отметку |
| карточка с радиокнопкой | Tab переводит фокус в группу; стрелки переходят между карточками и выбирают; Space выбирает |
Пределы контраста
- Рамка в покое: 1.33:1 в светлой теме и 2.00:1 в тёмной, ниже минимума 3:1; в контрастной 4.22:1. Рамка при наведении в светлой теме 1.86:1. Каждый вариант всё равно отмечают кружок или квадрат элемента и его подпись.
- Рамка выбранной карточки: не ниже 8.17:1 в любой теме.