RadioGroup
Single choice among visible options, with comfortable targets and optional descriptions.
Base UI reference ↗Notify me about
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add radio-groupDependencies
What add radio-group installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
npm
@base-ui/[email protected]
Examples
4 examples · 1 componentNotify me about
Named group
aria-labelledby names the group; each Label names and enlarges its option.
Up to 3 projects and community support.
Unlimited projects, history and priority support.
Everything in Pro plus roles and SSO.
Options with descriptions
Each description is linked to its item with aria-describedby.
In a row
A flex row for short options; arrow keys work the same.
Disabled options
A disabled option is skipped by the arrow keys; disabled on the group disables all.
API reference
Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.
| Prop | Type | Default |
|---|---|---|
RadioGroupRoot; value/defaultValue, onValueChange, name, disabled, required and readOnly. Stacks with gap-3; use className for a row. | div | — |
RadioGroupItemOne option; value is required. Pair it with a Label through id/htmlFor. | span | — |
valueThe option's value, submitted with the group's name. | string | — |
disabledOn an item or on the whole group. | boolean | false |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| Unchecked | Empty ring with the input border. |
| Checked | Primary ring with a filled dot. |
| Focus | Visible outline offset from the ring. |
| Disabled | Dimmed and skipped by keyboard navigation. |
| Invalid | Inside a Field with an error, the ring turns destructive. |
Accessibility
The group is a radiogroup and each item a radio: Tab enters on the checked option, arrow keys move and select, Space selects.
Name the group with aria-labelledby (or a fieldset legend) and each option with a Label; the label also enlarges the click target.
Descriptions go in a separate element referenced by aria-describedby on the item, so they are read after the option name.
The checked state is a filled dot inside a ring, not color alone; disabled options are skipped by the arrow keys.