Forms

Radio Group

Native radios grouped under role="radiogroup".

stableNo JS requiredBuilt on <input type="radio">hydrateless/radio.css

A set of native radios grouped under role="radiogroup". Sharing a name gives you single-selection and arrow-key navigation for free, with no JavaScript.

Playground

Live

Free Pro Team

Orientationverticalhorizontal

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
value	string	—	Selected value; pair with `onValueChange`.
defaultValue	string	—	Initial value (uncontrolled).
orientation	'vertical' | 'horizontal'	'vertical'	Layout direction.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-primary	Dot and ring of the selected radio.
--hl-border	Border of unselected radios.

Accessibility

• A shared name makes the browser enforce single selection and arrow-key roving.
• role="radiogroup" exposes the set as one control to assistive technology.

Related

CheckboxA label-wrapped checkbox on a native input.Segmented ControlA compact single-select built on native radios.FieldAn accessible layout wrapper for one form control.