Components

Radio Cards

Choose one of a few cards that each show their option, like a colour palette.

Palette

VioletOceanTealAmber

Import

import { RadioCards, RadioCard } from '@rinzai/zen';

API reference

<RadioCards>

A choice of one among a few cards, each showing what it picks (a palette, a plan). Native radio inputs underneath, so arrow keys and forms work as for any radio group. Lay the cards out with className (e.g. a grid); fill it with RadioCard. For short text options, use Segmented.

Prop	Type	Default
`children`Required The RadioCards.	`ReactNode`	`—`
`label`Required	`string`	`—`
`onChange`Required	`(value: V) => void`	`—`
`value`Required	`string`	`—`
`className` Classes for the cards' container: its layout (e.g. a grid).	`string`	`—`
`name` Form field name; defaults to a generated one.	`string`	`—`

<RadioCard>

One card: a native radio covering whatever you put inside, so the whole card is the click target. Outlined, lit when chosen; style it further with className and style (e.g. a background showing the choice).

Prop	Type	Default
`value`Required	`string`	`—`
`className`	`string`	`—`
`disabled` Can't be chosen (and the arrow keys skip it).	`boolean`	`—`
`style`	`CSSProperties`	`—`