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.

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.

It renders a single 24px control with a 40px hit area, is always round (a radio ignores the data-radius knob), and is style/high-contrast-aware.