Radio group
One choice out of a few options that are all visible at once. The group is a single tab stop; the arrow keys move and select.
Installation
Set up Camaleo once (Installation), then import what you need. Give the group a name with Fieldset and FieldsetLegend, and wrap each Radio in a Label.
import { RadioGroup, Radio, Fieldset, FieldsetLegend, Label } from "@camaleo/react";Anatomy
A RadioGroup holds the value. Each Radio is a circle with a dot inside, named by the Label around it.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Lowest latency for customers in Brazil.
Closest to most US services.
Keeps data inside the EU.
With descriptions
When the names alone don't help people choose, add a line under each option and link it with aria-describedby.
$24 per month, cancel anytime.
Controlled
Click an option. value and onValueChange let the rest of the screen react, here the price below.
Required, with an error
Submit it empty. With no safe default, mark the group required and say what to do in the FieldError.
Add a phone number in your profile to use this.
A disabled option
Disable only the option that can't be used, and say how to unlock it. Arrow keys skip it.
Seat preference
In a row
Two or three short options can sit side by side. Longer labels read faster in a column.
Read-only
On a review step, readOnly shows the choice and keeps it focusable, unlike disabled, which fades it out.
In context
Radio groups ask one question at a time. These are whole pieces of UI you can copy, in the skin you picked.
Checkout
Total
$93.99Appearance
Applies to this device only.
Cancel your plan
You keep Pro until Nov 30, 2026.
Guidelines
People can tick it and untick it again.
Once it is picked it can't be unpicked, so a lone radio traps people.
Each answer fits exactly one option.
A team of 10 fits two options, so people guess.
Props
defaultValue prop instead.value prop instead.Radio takes a required value (what the group reports when it is picked) and disabled. Native attributes pass through.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the group itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- The whole group is one tab stop, so a long form stays quick to tab through.
- Give every group a name: a FieldsetLegend, or aria-labelledby pointing at a visible heading.
- The hit area is at least 24 × 24 px (WCAG 2.5.8) in every skin, and the label text is clickable too.
- Inside a Field, the error is linked to the group with aria-describedby.