Rating
- Stable
- WCAG 2.2 evidence
- RTL
Collects a 1 to 5 star rating. Use Rating to display one. Built on React Aria RadioGroup: one radio per star, named "1 star" to "5 stars". Tab enters the group on the chosen
star, arrow keys move and select (mirrored in right-to-left locales), the choice is submitted with name
(WCAG 2.1.1, 4.1.2). The stars are 32 px targets (2.5.8). Chosen stars are filled and empty stars keep an outline; the
radio names, the checked state and the descriptor say the value in text (WCAG 1.1.1, 1.4.1, 1.4.11). Hovering
previews a rating; the keyboard focus ring surrounds the row of stars as in Figma (2.4.7). Consumer duties: question wording (label), descriptor wording, translated starLabel.
import { RatingInput } from "@nexera-ui/react";- 4
- examples
- 21
- props
- 6
- live controls
- 1
- platform
- 9
- WCAG criteria
- 1
- block uses 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 { RatingInput } from "@nexera-ui/react";
<RatingInput />Examples 3
The same examples as Storybook, rendered live. Open Code to copy one.
Disabled
Figma Disabled: the stars and the descriptor are dimmed to 45 %.
import { RatingInput } from "@nexera-ui/react";
const DESCRIPTORS = ["Not rated", "Poor", "Fair", "Good", "Very good", "Excellent"] as const;
const describeValue = (value: number): string => DESCRIPTORS[value] ?? "";
<RatingInput label="Rate your onboarding" descriptor={describeValue} defaultValue={3} isDisabled />;
Long label
Long questions and descriptors wrap; the stars wrap in very narrow containers.
import { RatingInput } from "@nexera-ui/react";
const DESCRIPTORS = ["Not rated", "Poor", "Fair", "Good", "Very good", "Excellent"] as const;
const describeValue = (value: number): string => DESCRIPTORS[value] ?? "";
<div className="max-w-[16rem]">
<RatingInput
label="How would you rate the support you received from the people team during your first week?"
descriptor={(value: number) =>
value === 0
? "Not rated yet: choose between 1 (poor) and 5 (excellent)"
: describeValue(value)
}
/>
</div>;
Right to left
Right-to-left: the first star is on the right and arrow keys follow the reading direction. Translate the names.
import { RatingInput } from "@nexera-ui/react";
<RatingInput
label="قيّم تجربتك"
descriptor={(value: number) => (value === 0 ? "لم يتم التقييم" : `${String(value)} من 5`)}
defaultValue={3}
starLabel={(stars: number) => `${String(stars)} نجوم`}
/>;
Props 21
Press "Try it" on a card to load that prop into the playground.
21 props shown
valueNexeranumberThe rating, 0 (not rated) to 5. Controlled; pair it with onChange.
defaultValueNexeranumberThe initial rating when uncontrolled.
onChangeNexera(value: number) => voidCalled with the new rating (1 to 5) when the user picks a star.
descriptorNexeraReactNode | ((value: number) => ReactNode)Text under the stars, for example "Not rated", "Good". Pass a function to
describe the current rating; it receives 0 while nothing is chosen. Shown when provided and linked to the group with
aria-describedby. Translate it.
errorMessageNexeraReactNodeError text under the stars, shown while the group is invalid (for example isRequired on submit).
starLabelNexera(stars: number) => stringAccessible name of each star option. Translate it, with your locale's plural rules.
classNameNexerastringExtra classes for the root, merged last so they win over the defaults.
styleNexeraCSSPropertiesInline style for the root.
labelNexeraReactNodeVisible question above the stars, for example "Rate your onboarding". Wraps; names the radio group.
aria-labelNexerastringAccessible name of the group when the question is not shown. Translate it.
aria-labelledbyNexerastringId(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).
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 · 3 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.11Non-text ContrastLevel AA · supporting test
- 2.1.1KeyboardLevel A · tested directly
- 2.4.7Focus VisibleLevel AA · supporting test
- 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-previewdata-readonly
<RatingInput className="data-disabled:opacity-90 shadow-sm" />Used in blocks
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.