Radio Button

The Radio Button lets users select a single option from a set of mutually exclusive choices.

When to use

Use a radio button when only one selection is allowed from a short list of options.
Use the Large size for touch targets and the Small size when space is limited.
Use the Error, Warning, Success, or Info validation variants to surface stateful feedback.

When not to use

Don't use a radio button for multi‑select scenarios; use a checkbox instead.
Don't rely on the radio button alone to convey important information; pair it with clear labels or helper text.
Don't use the Disabled state for required fields; provide an alternative interaction path.

Anatomy / variants

Variant	Description	When to use
`size` – Large, Medium, Small	Controls the overall dimensions of the control and label.	Choose Large for touch devices, Small for dense layouts.
`state` – Default, Hover, Pressed, Disabled, Focus	Visual and interaction states of the control.	Use Disabled when the option isn’t selectable.
`validation` – None, Error, Warning, Success, Info	Indicates validation feedback.	Apply Error for required‑field failures, Success after a valid choice, etc.
`checked` – False, True	Whether the radio button is selected.	Set to True for the default selected option.
`type` – Radio, Radio + Label	Layout of the control relative to its label.	Use Radio + Label when the label should appear beside the control; otherwise, use Radio for a standalone control.

Props / API

Prop	Type	Default	Description
`size`	`enum` (`"Large"`, `"Medium"`, `"Small"`)	`"Large"`	Determines the component’s size.
`state`	`enum` (`"Default"`, `"Hover"`, `"Pressed"`, `"Disabled"`, `"Focus"`)	`"Default"`	Visual interaction state.
`validation`	`enum` (`"None"`, `"Error"`, `"Warning"`, `"Success"`, `"Info"`)	`"None"`	Validation feedback variant.
`checked`	`boolean`	`false`	Marks the radio button as selected.
`type`	`enum` (`"Radio"`, `"Radio + Label"`)	`"Radio"`	Chooses between a bare control or a control with an attached label.

Accessibility

Use the native <input type="radio"> element to ensure keyboard operability and correct ARIA role.
Associate a visible label with the radio button via the for/id pair; the Radio + Label variant does this automatically.
When validation is set to Error, Warning, Success, or Info, expose the message with aria-live="polite" so screen readers announce the feedback.
In the Disabled state, set disabled on the input and do not place focus on the control.
Ensure sufficient contrast between the control’s indicator and its background in all states.

Changelog