OptionCard

One answer in an “intent” picker, drawn as a tile. A group of them sits in a ChoiceGroup, which names the question.

import { OptionCard } from '@zitdevs/ui';

Examples

What do you need?

Build a productRun and support our ITGrow onlineSomething else

<ChoiceGroup id="intent" legend="What do you need?">
  <div className="grid gap-2.5 sm:grid-cols-2">
    <OptionCard id="intent-product" name="intent" value="product" label="Build a product" />
    <OptionCard id="intent-support" name="intent" value="support" label="Run and support our IT" />
  </div>
</ChoiceGroup>

One on its own, for a quick look:

Book a call

Props

Prop	Type	Default	Notes
id	string	required
name	string	required	Shared by the group, so only one can be chosen.
value	string	required	Submitted when chosen.
label	string	required	The radio’s name.
defaultChecked	boolean	false	checked with onChange holds it instead.
ref	Ref<HTMLInputElement>	—	The radio.
className	string	—	Placement, on the tile.
anything else	<input> attributes	—	On the radio: required, disabled, onChange…

Exported types: OptionCardProps.

Accessibility

• A native radio under the tile: one choice per group, the arrow keys move between them, and it submits without a script.
• The radio is visually hidden; the tile draws its chosen state and its focus ring while the radio has focus.

Without JavaScript

It needs none: the chosen state is drawn from the radio’s own :checked. It renders as a Server Component.

Theming

surface-raised and border-default, border-strong on hover; primary on primary-soft once chosen; border-strong for the marker until then; the focus ring.

Use instead: a choice that needs a description → PathCard.