Radio
Accessible React radio group with a shared label, helper text, error state, horizontal layout, and Arabic support. One choice from a small visible set.
Wrap options in RadioGroup, one Radio per choice. The group owns the label, helper text, and error state.
When to use
Use RadioGroup when the user must pick exactly one of two to five visible options and seeing them all helps. Applicant type and delivery method are typical cases. For more options, use Select. If more than one option can apply, use Checkbox.
Give the group a label that states the question, and set a default only when one option is the norm.
Examples
Props
Props declared by Radio. Native attributes of the underlying element pass through.
<Radio>
| Prop | Type | Default | Description |
|---|---|---|---|
label | react.ReactNode | Visible label for this radio, sits beside the circle, associated via htmlFor/id. | |
asChild | boolean | ||
checked | boolean | ||
required | boolean | ||
valuerequired | string |
<RadioGroup>
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "neutral" | ||
orientation | "vertical" | "horizontal" | ||
label | react.ReactNode | Group label, sits above the rows. Associated to the group via aria-labelledby. | |
helperText | react.ReactNode | Hint shown below the group. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the group when error is true (or when only errorMessage is set). | |
error | boolean | Marks the group invalid: sets aria-invalid and applies error styling. | |
readOnly | boolean | Locks the group: shows the value but can't be changed; stays focusable, sets aria-readonly. | |
childrenrequired | react.ReactNode | <Radio> children. | |
asChild | boolean | ||
name | string | ||
form | string | ||
required | boolean | ||
disabled | boolean | ||
dir | Direction | ||
loop | boolean | ||
defaultValue | string | ||
value | string | ||
onValueChange | (value: string) => void |
Accessibility
RadioGroup owns the group label, helper text, and error, so the whole set is announced as one question. Tab moves focus into the group and the arrow keys move between options, following the reading direction in RTL.
Space or Enter selects the focused option. Errors set aria-invalid on the group.