Skip to content

Documentation

Radio

Radio is the single-choice selection control for mutually exclusive options that share the same name.

Storybook Source Figma

Root Props

Prop	Type	Default
`checked`	`boolean`	—
Controlled checked state of the radio. Used in controlled components for full state management.
`defaultChecked`	`boolean`	—
Initial checked state for uncontrolled usage. Mirrors the native `defaultChecked` HTML behavior.
`variant`	`RadioVariant`	`'primary'`
Visual variant of the radio, for theme or context switching.
`size`	`RadioSize`	`'md'`
Size of the radio input.
`disabled`	`boolean`	—
Disables the radio, making it non-interactive. Also applies a visually disabled style.
`ref`	`Ref<HTMLInputElement>`	—
Ref to the native `<input type="radio">` element. Useful for managing focus.

Also accepts all <input> attributes.

Child Parts

Radio does not expose public child parts.

Types

RadioProps
RadioSize
RadioVariant

State Model

Radio can be controlled through checked or uncontrolled through defaultChecked.
Mutual exclusivity depends on consumer-supplied native group semantics through shared name.
The component itself is one native input, not a root-plus-parts composition model.