Components
Radio and RadioGroup
A set of radio buttons where one is chosen.
RadioGroup holds the choice and Radio is one option. Both are client components built on native
radio inputs that share a name, so arrow keys move the choice and the browser fires a real
change event for each move. They read theme defaultProps.
import Radio from '@hone-ui/react/Radio';
import RadioGroup from '@hone-ui/react/RadioGroup';Examples
<RadioGroup aria-label="Fruit" defaultValue="apple">
<FormControlLabel value="apple" control={<Radio />} label="Apple" />
<FormControlLabel value="pear" control={<Radio />} label="Pear" />
</RadioGroup>A controlled group reads value from your state:
<RadioGroup aria-label="Plan" value={plan} onChange={(event, value) => setPlan(value)} row>
<FormControlLabel value="free" control={<Radio />} label="Free" />
<FormControlLabel value="pro" control={<Radio />} label="Pro" />
</RadioGroup>To name the group with a FormLabel, give the label an id and the group aria-labelledby.
<FormControl>
<FormLabel id="plan">Plan</FormLabel>
<RadioGroup aria-labelledby="plan">...</RadioGroup>
</FormControl>RadioGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
value | unknown | none | The controlled choice. null chooses nothing. Compared as a string. |
defaultValue | unknown | none | The starting choice when uncontrolled. |
onChange | (event, value: string) => void | none | The real change event and event.target.value. |
name | string | generated | Shared by every radio input. |
row | boolean | false | Lays the radios out in a row. |
aria-label, aria-labelledby | string | none | Names the group. |
sx, className, style, ref, children | Standard. They go to the root div. |
Inside a FormControl, disabled disables every radio and required sets aria-required on the
group.
Radio props
| Prop | Type | Default | Description |
|---|---|---|---|
value | unknown | none | The option's value. Compared as a string. |
checked, defaultChecked | boolean | none | Only for a Radio outside a RadioGroup. Ignored inside one. |
onChange | (event, checked) => void | none | Fires on the radio that became chosen. |
color | 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning' | 'primary' | The chosen color. |
size | 'small', 'medium' | 'medium' | The size. |
disabled, required, readOnly | boolean | false | As in Checkbox. |
icon, checkedIcon | ReactNode | ring, ring with dot | Replace the drawings. |
name, autoFocus, id, inputRef, slotProps, inputProps, disableRipple | As in Checkbox. Inside a group, name comes from the group. | ||
sx, className, style, ref | Standard. They go to the root div. |
Inside a FormControl, disabled and required follow it and error colors the radio.
Notes
- A Radio inside a RadioGroup ignores
checked. Setvalueon the group instead. - No
slotsprop. - The real input covers each radio, so test tools can click it directly, with no
force.
Accessibility
RadioGroup renders role="radiogroup". Give it aria-label or aria-labelledby. Name each
Radio with FormControlLabel or inputProps['aria-label'].