Radio

Usage

import { Radio, RadioGroup } from '@epilot/spark-ui/radio'

<RadioGroup defaultValue="standard">
  <label className="flex items-center gap-3">
    <Radio value="standard" />
    <span>Standard</span>
  </label>
  <label className="flex items-center gap-3">
    <Radio value="eco" />
    <span>Eco</span>
  </label>
</RadioGroup>

Always render a Radio inside a RadioGroup: the group provides the roving focus and arrow-key navigation expected of a radio set.

Examples

Styles

Set the styleVariant prop on the group (or a single radio) to restyle it: solid (default), soft, and surface; an ambient data-style on an ancestor still cascades. A checked radio is a ring + dot (never a filled box): in solid the ring and dot are the strong accent; soft drops the ring and softens the dot; surface keeps the accent ring with a softer dot.

High contrast

High contrast is an orthogonal modifier for AA+ legibility, set via <Theme highContrast> (or the raw data-high-contrast attribute). It deepens the ring and dot (step 11 → 12) of any style variant.

Colors

The radio paints with the accent scale by default. Set the color prop on the group (or a single radio) to neutral or danger to re-color it, appearance-correct in both light and dark. Wrapping in <Theme accentColor="…"> still works for arbitrary accent colours outside this fixed set.

List styles

Set listStyle on RadioGroup to show the options as a list of SelectionItem rows: soft, surface, outlined or ghost. Each row takes a Radio as control, a label and an optional description. See Selection groups for choosing between radios, checkboxes and switches.

Controlled

Disabled

API Reference

This component wraps Base UI Radio. RadioGroup accepts value, defaultValue, onValueChange, disabled, and name; each Radio takes a value. See the Base UI documentation for the full API. Spark additions on both RadioGroup and Radio:

• styleVariant: 'solid' | 'soft' | 'surface' | 'ghost' | 'outline'. Per-group/per-radio style; defaults to solid once color or styleVariant is set.
• color: 'accent' | 'neutral' | 'danger'. Re-points the accent scale.
• RadioGroup.gap: number, default 3. How many --spark-layout-gap units apart each radio sits. Ignored when listStyle is set.
• RadioGroup.listStyle: 'soft' | 'surface' | 'outlined' | 'ghost'. Shows the options as a styled list of SelectionItem rows. Without it the group is a plain stack. SelectionItem is documented on Checkbox Group.

It renders a single 24px control with a 40px hit area — reserved as layout via my-2, so a radio occupies a 40px row even though it paints 24px. It is always round (a radio ignores the data-radius knob), and is style/high-contrast-aware.

Accessibility

• RadioGroup renders role="radiogroup". Inside a FieldSet, the <legend> names the <fieldset>, not the inner group, so give the group its own aria-label or aria-labelledby if you need it named; outside one, pass aria-label or aria-labelledby to the group.
• Keyboard: Tab moves focus into and out of the group, the arrow keys move between and select options, Space selects the focused option.
• With listStyle, SelectionItem names each radio by its label and describes it by its description.
• A group-level FieldError inside a FieldSet keeps role="alert", and the fieldset announces it before the hint.