RadioCard
RadioCard — вариант радиогруппы карточкой: для выбора из нескольких вариантов, которые стоит показать, а не только назвать (тема оформления, вид списка, тариф). RadioCard.Root — Ark RadioGroup.Item, рендерит <label>-карточку: клик по любой части выбирает значение, выбранная выделяется обводкой и отмеченным кружком в углу. Внутри свободно комбинируются части: RadioCard.Illustration — картинка варианта (inline-SVG на всю ширину), RadioCard.Title — название, RadioCard.Description — пояснение.
Как и Radio, сама по себе карточка не работает — только внутри RadioGroup: группа держит выбранное value и onValueChange. Раскладку карточек задаёт группа (обычно сетка равных колонок).
Анатомия
Примеры
Без иллюстрации и отключённый вариант
Карточка собирается из любых частей: только название и пояснение — тоже карточка. disabled отключает отдельный вариант: он тускнеет и не реагирует на клики, остальная группа работает.
API
| Prop | Type | Default |
|---|---|---|
children*Части карточки: RadioCard.Illustration, RadioCard.Title, RadioCard.Description — в любом наборе | ReactNode | - |
value*Значение варианта: по нему RadioGroup помечает карточку выбранной и получает его в onValueChange при выборе | RadioItemProps["value"] | - |
disabledОтключает карточку: она тускнеет и не реагирует на клики | RadioItemProps["disabled"] | - |
className | string | - |
RadioCard.Illustration
Иллюстрация варианта: SVG или изображение растягивается на ширину карточки, пропорции задаёт viewBox.
| Prop | Type | Default |
|---|---|---|
children*Иллюстрация варианта — обычно inline-SVG; растягивается на ширину карточки, пропорции задаёт viewBox | ReactNode | - |
RadioCard.Title
Название варианта — Ark ItemText.
| Prop | Type | Default |
|---|---|---|
children*Название варианта | ReactNode | - |
RadioCard.Description
Пояснение к варианту приглушённым текстом.
| Prop | Type | Default |
|---|---|---|
children*Пояснение к варианту — одной-двумя фразами | ReactNode | - |