Radios collect exactly one choice from a set of visible options, as plain labeled circles with optional hints, built on React Aria’s RadioGroup.
Radios collect exactly one choice from a set of visible options, as plain labeled circles with optional hints, built on React Aria’s RadioGroup.
Change the props and copy the result. The component select switches between the full RadioGroup and the bare RadioButtonBase, whose state controls are all real props.
The group’s options are fixed
RadioGroup needs RadioButton children, which the playground’s copyable snippet cannot carry, so the snippet covers the group element only and the two options stay fixed. Paste a full example from the Code tab when starting from scratch.Two layers from one module: the primitive group and button most forms use, and the bare visual circle they are built around. The card-style groups over the same semantics live on the Radio groups page.
| Component | Description | Import from |
|---|---|---|
| RadioGroup | The group container: owns the selection, the form value, and the size of every button inside. | @/components/base/radio-buttons/radio-buttons |
| RadioButton | One option: the circle with an optional label and hint, built on React Aria’s Radio. Only works inside a RadioGroup. | @/components/base/radio-buttons/radio-buttons |
| RadioButtonBase | The bare visual circle. Renders two divs and nothing interactive; compose it inside your own Radio. | @/components/base/radio-buttons/radio-buttons |
Both sizes with every text form, all live. The circle measures 16px at sm and 20px at md, and the labels step with it, text-sm to text-md. A radio without a visible label still needs an aria-label; the bare cells below carry one.
The whole row selects
Every treatment below is painted by the kit itself: RadioButtonBase takes its states as plain props, so nothing in this grid is a hand-copied approximation.
No hover, by design
RadioButtonBase paints it from the isFocusVisible prop in the grid above.Survives forced colors