FormsStable

Option Card

Sourcecomponents/OptionCard.astro

Selectable set

A bordered card that acts as a radio option — a custom dot and the option text. Picking one clears the rest; the chosen card fills with an accent tint. Used for the brand-archetype quiz.

Pick one

Option one — a short line of choice text. Option two — a short line of choice text. Option three — a short line of choice text. Option four — disabled.

Without the dot

With dot={false} the leading radio dot is hidden — the whole card is the control, marked selected by its border/fill and a small corner check. Cleaner for grids of choice cards.

dot={false}

I have an idea I'm founding now My business runs

Props

Prop	Type	Default	Notes
`name`	string	`—`	Group name — shared across the set. Required.
`value`	string	`—`	Submitted value when picked. Required.
`checked`	boolean	`false`	Selected by default.
`disabled`	boolean	`false`	Dims and blocks the option.
`dot`	boolean	`true`	false hides the radio dot — corner check marks the selection instead.
`required`	boolean	`false`	Makes the group required in a form.
`surface`	'light' \| 'dark'	`'light'`	'dark' for glass/on-image surfaces.

Usage

Give every option in the set the same name. Stack them in a column.

<OptionCard name="opt" value="a" checked>Option one</OptionCard>
<OptionCard name="opt" value="b">Option two</OptionCard>
<OptionCard name="opt" value="c">Option three</OptionCard>

Rules

Use for a quiz or big-choice step where each option needs room.

Keep option text to a line or two.

Don't

Use it for a compact form field — that's Radio.

Allow multiple picks — it’s single-select.