Radio
- Stable
- WCAG 2.2 evidence
- RTL
One labelled option of a RadioGroup: the circle (the same element as Radio) followed by the
label and description. The whole row, description included, is one <label>, so a click or tap anywhere on it selects
the option (WCAG 2.5.8); the group is one Tab stop, arrows move and select, Space selects (2.1.1). The label alone is
the accessible name and the description is linked with aria-describedby (1.3.1, 4.1.2); selected is a dot (1.4.1).
Keyboard focus draws a ring around the row and the circle. Must be rendered inside a RadioGroup (which shows the group error). Consumer duties: label wording, parallel grammar.
import { RadioField } from "@nexera-ui/react";- 5
- examples
- 17
- props
- 2
- live controls
- 1
- platform
- 10
- WCAG criteria
- 4
- 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 { RadioField } from "@nexera-ui/react";
<RadioField />Examples 4
The same examples as Storybook, rendered live. Open Code to copy one.
In group
Options of a group: Figma Value=Selected comes from the group's value / defaultValue.
import { RadioField, RadioGroup } from "@nexera-ui/react";
export function InGroup() {
return (
<RadioGroup label="Leave type" defaultValue="annual">
<RadioField value="annual" label="Annual leave" description="12 days left this year" />
<RadioField value="sick" label="Sick leave" description="Certificate after 2 days" />
<RadioField value="unpaid" label="Unpaid leave" description="Ask HR first" isDisabled />
</RadioGroup>
);
}
Invalid
Figma State=Error: the group is invalid, the descriptions turn red and the group shows the error with an icon.
import { RadioField, RadioGroup } from "@nexera-ui/react";
export function Invalid() {
return (
<RadioGroup label="Leave type" isInvalid errorMessage="Choose a leave type.">
<RadioField value="annual" label="Annual leave" description="12 days left this year" />
<RadioField value="sick" label="Sick leave" description="Certificate after 2 days" />
</RadioGroup>
);
}
Long text
Labels and descriptions wrap; the circle stays aligned with the first line.
import { RadioField, RadioGroup } from "@nexera-ui/react";
export function LongText() {
return (
<RadioGroup label="Leave type">
<RadioField
value="carry"
label="Annual leave carried over from the previous financial year"
description="Expires at the end of March unless your manager extends it in writing"
/>
</RadioGroup>
);
}
Right to left
Right-to-left: the circle moves to the start (right) of the row.
import { RadioField, RadioGroup } from "@nexera-ui/react";
export function RightToLeft() {
return (
<RadioGroup label="نوع الإجازة" defaultValue="annual">
<RadioField value="annual" label="إجازة سنوية" description="بقي 12 يومًا هذا العام" />
<RadioField value="sick" label="إجازة مرضية" description="شهادة طبية بعد يومين" />
</RadioGroup>
);
}
Props 17
Press "Try it" on a card to load that prop into the playground.
17 props shown
descriptionNexeraReactNodeHelper text under the label. Linked with
aria-describedby; turns status/danger/fg while the group is invalid. Plain text: it sits
inside the clickable row, so it must not contain links or buttons. Shown when provided.
classNameNexerastringExtra classes for the root, merged last so they win over the defaults.
styleNexeraCSSPropertiesInline style of the root.
labelNexeraVisibleContentVisible label. It is the accessible name (the description is not part of it), wraps and is never truncated. No visible label.
aria-labelNexerastringOverrides the name given by label. Avoid: the name must contain the visible text (WCAG 2.5.3).
Accessible name. Translate it.
Accessible name; aria-labelledby wins when both are set.
aria-labelledbyNexerastringId(s) of element(s) that name the radio instead of label.
Id(s) of element(s) that name the radio; wins over aria-label.
Id(s) of visible element(s) that name the radio.
value*React AriastringThe value of the radio button, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).
isDisabledReact AriabooleanWhether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance.
autoFocusReact AriabooleanWhether the element should receive focus on render.
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.
onPressReact Aria(e: PressEvent) => voidHandler that is called when the press is released over the target.
onPressStartReact Aria(e: PressEvent) => voidHandler that is called when a press interaction starts.
onPressEndReact Aria(e: PressEvent) => voidHandler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressChangeReact Aria(isPressed: boolean) => voidHandler that is called when the press state changes.
onPressUpReact Aria(e: PressEvent) => voidHandler that is called when a press is released over the target, regardless of whether it started on the target or not.
inputRefReact AriaRef<HTMLInputElement | null>A ref for the HTML input element.
* 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
7 direct · 3 supporting- 1.3.1Info and RelationshipsLevel A · tested directly
- 1.4.1Use of ColorLevel A · tested directly
- 1.4.4Resize TextLevel AA · supporting test
- 1.4.12Text SpacingLevel AA · supporting test
- 2.1.1KeyboardLevel A · tested directly
- 2.4.7Focus VisibleLevel AA · tested directly
- 2.5.3Label in NameLevel A · tested directly
- 2.5.8Target Size (Minimum)Level AA · supporting test
- 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:.
data-disableddata-focus-visibledata-invaliddata-readonly
<RadioField className="data-disabled:opacity-90 shadow-sm" />Used in blocks
- Choose an optionForms and data entry
- Shift pickerScheduling and calendar
- 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.