NPSScale
- Stable
- WCAG 2.2 evidence
- RTL
Net Promoter Score question: eleven scores from 0 to 10 with low and high anchors. Built on React Aria RadioGroup: each score is a radio named by its number, the anchors describe 0 and 10, Tab enters
on the chosen score, arrow keys move and select (mirrored in right-to-left locales), and the score is submitted with
name (WCAG 1.3.1, 2.1.1, 4.1.2). Scores are 40 px targets (2.5.8). The chosen score takes its band colour, but the
number and the checked state carry the value (1.4.1). The row wraps in narrow containers. Consumer duties: the question wording (label), translated anchors.
import { NPSScale } 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 { NPSScale } from "@nexera-ui/react";
<NPSScale />Examples 3
The same examples as Storybook, rendered live. Open Code to copy one.
Narrow container
The scores wrap in a narrow container; the anchors stay at the two ends.
import { NPSScale } from "@nexera-ui/react";
<div className="max-w-[18rem]">
<NPSScale
label="How likely are you to recommend Nexera to a friend?"
lowAnchor="Not at all likely"
highAnchor="Extremely likely"
/>
</div>;
Long content
Long questions and anchors wrap.
import { NPSScale } from "@nexera-ui/react";
<NPSScale
label="Considering everything about your first three months, how likely are you to recommend working here to a friend?"
lowAnchor="Not at all likely, under any circumstances"
highAnchor="Extremely likely, without hesitation"
/>;
Right to left
Right-to-left: 0 is on the right; arrow keys follow the reading direction.
import { NPSScale } from "@nexera-ui/react";
<NPSScale
label="ما مدى احتمال أن توصي بنا لصديق؟"
lowAnchor="غير محتمل على الإطلاق"
highAnchor="محتمل للغاية"
defaultValue={8}
/>;
Props 21
Press "Try it" on a card to load that prop into the playground.
21 props shown
valueNexeranumber | nullThe chosen score, 0 to 10, or null for none. Controlled; pair it with onChange.
defaultValueNexeranumber | nullThe initial score when uncontrolled.
onChangeNexera(value: number) => voidCalled with the chosen score (0 to 10).
lowAnchorNexeraReactNodeMeaning of 0, for example "Not at all likely". Shown under the first score and read as its description. Translate it.
highAnchorNexeraReactNodeMeaning of 10, for example "Extremely likely". Shown under the last score and read as its description. Translate it.
errorMessageNexeraReactNodeError text under the scale, shown while the group is invalid (for example isRequired on submit).
classNameNexerastringExtra classes for the root, merged last so they win over the defaults.
styleNexeraCSSPropertiesInline style for the root.
labelNexeraReactNodeThe question, shown above the scores, for example "How likely are you to recommend us to a friend?". Wraps.
aria-labelNexerastringAccessible name when the question is shown elsewhere. Translate it.
aria-labelledbyNexerastringId(s) of the visible element(s) that hold the question.
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
5 direct · 4 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.10ReflowLevel 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-hovereddata-readonlydata-selected
<NPSScale 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.