Radio Card Group

A vertical stack of full-width selectable cards backed by a single value (radio semantics).

Usage

import {
  RadioCardGroup,
  RadioCardGroupItem,
} from '@epilot/spark-ui/radio-card-group'

The group accepts both controlled (value + onValueChange) and uncontrolled (defaultValue) forms. Items are rendered with role="radio" and the active card gets the accent border + soft fill.

const [mode, setMode] = useState('eco')

<RadioCardGroup value={mode} onValueChange={setMode}>
  <RadioCardGroupItem value="eco">Eco</RadioCardGroupItem>
  <RadioCardGroupItem value="fast">Fast</RadioCardGroupItem>
  <RadioCardGroupItem value="scheduled">Scheduled</RadioCardGroupItem>
</RadioCardGroup>

Examples

Rich item content

Items accept any children: drop in icons, descriptions, or two-line layouts.

API Reference

`RadioCardGroup`

Prop	Type	Default
`value`	`string`	—
`defaultValue`	`string`	—
`onValueChange`	`(value: string) => void`	—
`disabled`	`boolean`	`false`
`name`	`string`	generated

`RadioCardGroupItem`

Extends React.ButtonHTMLAttributes<HTMLButtonElement> with a required value: string. The item's disabled prop falls back to the group's.