Radio
- Stable
- WCAG 2.2 evidence
- RTL
One choice from a short list of mutually exclusive options: a legend with an optional required
asterisk and helper text, the options as RadioField rows or RadioCards, and an error with an icon. Built on React
Aria RadioGroup: a named role="radiogroup" that is one Tab stop; arrow keys move to and select the next option
(Left and Right are mirrored in right-to-left locales when horizontal), Space selects (WCAG 2.1.1, 4.1.2). The helper
and the error are linked to every option with aria-describedby (1.3.1, 3.3.1); the error is text with an icon (1.4.1). Consumer duties: legend and option wording (parallel grammar), error wording; more than six options belong in a
Select, and a binary on/off choice in a Switch.
import { RadioGroup } from "@nexera-ui/react";- 4
- examples
- 23
- props
- 6
- live controls
- 1
- platform
- 8
- WCAG criteria
- 9
- blocks use it
Try every prop. Copy the code.
Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.
import { RadioGroup } from "@nexera-ui/react";
<RadioGroup />Examples 3
The same examples as Storybook, rendered live. Open Code to copy one.
Cards
Cards: RadioCard options, 12 px apart.
import { RadioGroup } from "@nexera-ui/react";
<RadioGroup
label="Who can see your birthday"
description="Shown on your profile and in team celebrations."
errorMessage="Choose who can see your birthday."
isRequired
defaultValue="team"
type="card"
>
{null}
</RadioGroup>;
Horizontal
Figma Orientation=Horizontal: the options sit in a row and wrap onto new rows when the container is narrow.
import { RadioGroup } from "@nexera-ui/react";
<RadioGroup
label="Who can see your birthday"
description="Shown on your profile and in team celebrations."
errorMessage="Choose who can see your birthday."
isRequired
defaultValue="team"
orientation="horizontal"
>
{null}
</RadioGroup>;
Right to left
Right-to-left: the legend and options align right; Left and Right arrows are mirrored in horizontal groups.
import { RadioGroup } from "@nexera-ui/react";
<RadioGroup
label="من يمكنه رؤية تاريخ ميلادك"
description="يظهر في ملفك الشخصي وفي احتفالات الفريق."
errorMessage="Choose who can see your birthday."
isRequired
defaultValue="team"
orientation="horizontal"
>
{null}
</RadioGroup>;
Props 23
Press "Try it" on a card to load that prop into the playground.
23 props shown
children*NexeraReactNodeThe options: RadioFields, RadioCards or bare Radios, each with a value.
descriptionNexeraReactNodeHelper text under the legend. Linked to the group and to
every option with aria-describedby. Shown when provided.
errorMessageNexeraReactNode | ((validation: ValidationResult) => ReactNode)Error under the options with an icon. Shown while the group
is invalid (isInvalid, validate, or native isRequired validation on submit); defaults to the validation message.
Write how to fix it ("Choose who can see your birthday.").
typeNexera"list" | "card"Option layout: list for RadioField rows (24 px apart when horizontal), card for RadioCards
(12 px apart, 232 px wide when horizontal). The options themselves come from children.
classNameNexerastringExtra classes for the root, merged last so they win over the defaults.
styleNexeraCSSPropertiesInline style of the root.
labelNexeraVisibleContentVisible legend above the options. Names the group; wraps. No visible legend.
aria-labelNexerastringOverrides the name given by label. Avoid: the name must contain the visible text (WCAG 2.5.3).
Accessible name of the group. Translate it.
Accessible name; aria-labelledby wins when both are set.
aria-labelledbyNexerastringId(s) of element(s) that name the group instead of label.
Id(s) of element(s) that name the group; wins over aria-label.
Id(s) of the visible element(s) that name the group.
validationBehaviorReact Aria"native" | "aria"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
nameReact AriastringThe name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
orientationReact Aria"horizontal" | "vertical"The axis the Radio Button(s) should align with.
valueReact Ariastring | nullThe current value (controlled).
defaultValueReact Ariastring | nullThe default value (uncontrolled).
onChangeReact Aria(value: string) => voidHandler that is called when the value changes.
isDisabledReact AriabooleanWhether the input is disabled.
isReadOnlyReact AriabooleanWhether the input can be selected but not changed by the user.
isRequiredReact AriabooleanWhether user input is required on the input before form submission.
isInvalidReact AriabooleanWhether the input value is invalid.
validateReact Aria(value: string) => true | ValidationError | nullA function that returns an error message if a given value is invalid.
Validation errors are displayed to the user when the form is submitted
if validationBehavior="native". For realtime validation, use the isInvalid
prop instead.
formReact AriastringThe <form> element to associate the input with.
The value of this attribute must be the id of a <form> in the same document.
See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
idReact AriastringThe element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
aria-describedbyReact AriastringIdentifies the element (or elements) that describes the object.
* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.
Accessible by default.
Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.
WCAG 2.2 evidence
6 direct · 2 supporting- 1.1.1Non-text ContentLevel A · tested directly
- 1.3.1Info and RelationshipsLevel A · tested directly
- 1.4.1Use of ColorLevel A · tested directly
- 1.4.10ReflowLevel AA · supporting test
- 1.4.12Text SpacingLevel AA · supporting test
- 2.1.1KeyboardLevel A · tested directly
- 3.3.1Error IdentificationLevel A · tested directly
- 4.1.2Name, Role, ValueLevel A · tested directly
Fits any width.
Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.
Styling hooks
Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.
<RadioGroup className="shadow-sm" />Used in blocks
- Choose a planOnboarding
- Choose an optionForms and data entry
- AppearanceSettings and preferences
- Billing and planSettings and preferences
- Shift pickerScheduling and calendar
- Pricing plansCommerce and payments
- Saved payment methodsCommerce and payments
- Short surveyFeedback and surveys
- Bottom sheet pickerMobile patterns
Related components
- CalendarDayOne day of a {@link CalendarMonth } grid, built on React Aria `CalendarCell`: a `gridcell` whose button is named by the full, localised date ("Wednesday, October 14, 2026"), with `aria-selected`, `aria-disabled` and the "today" and range descriptions read by screen readers (WCAG 1.3.1, 4.1.2).
- CalendarMonthA month calendar for picking a date or a date range: header with previous / next buttons and the localised month name, weekday row, and six weeks of `CalendarDay`s.
- CheckboxThe bare 18 px checkbox: one independent yes/no choice applied on submit, or a row selector in a table, list or tree.
- CheckboxCardA large checkbox option with an icon, a title and a description, for a few options that need explanation (notification channels, benefits).
- CheckboxFieldA checkbox with a label and optional helper text: the box (the same element as `Checkbox`) followed by the label and description, applied on submit.
- ColorInputA hex colour field with a swatch and a picker popover.
- ColorPickerPicks a colour.
- ColorTokenCardDocumentation card for one colour token: a 96 px colour sample with an "Aa" text sample, then the name, token path, hex value and contrast note as text.