Skip to content
EspañolEnglish
All components (204)

NPS survey

Commerce · NpsSurvey · .amset-nps

What it is and when to use it

The 0 to 10 question ("Would you recommend the store to a friend?") and, as soon as a score is chosen, the one about why.

When to use it

  • After a purchase or a delivery, to measure NPS.
  • value and onChange carry the chosen score (null with no score).
  • With onComment, when a score is chosen a text field appears (with what is typed in comment) and a question depending on the score: "What let you down the most?" (0 to 6), "What would it take for us to get a 10?" (7 and 8) or "What did you like the most?" (9 and 10). tracking replaces it with your own.
  • lowEnd and highEnd say what 0 and 10 mean ("Not at all likely", "Extremely likely").
  • To compute the score from many responses, the library exports npsScore and npsCategory.

When not to

  • The opinion of a product with stars: Rating.
  • A short scale of words ("Bad", "Okay", "Good"): SegmentedGroup or RadioGroup.

Keyboard: it is a radio group: Tab enters through the chosen score (with no score, through the first) and the arrow keys move through the scale choosing. If there is a follow-up question, the next Tab goes to its field.

Accessibility: the question is the name of the group and the line of the ends describes it. 0 and 10 are read with what they mean ("0, not at all likely"). All scores look the same until one is chosen: the color of the stretch is confirmation, not information. Each score is at least 44 px tall, and if all eleven do not fit in one row, the scale is split on purpose into 0-5 and 6-10.

Fine-tuning: CSS variables --amset-nps-*: -ends, -gap, -note, -question, -radius. The size moves the gap, the question and the scores. The score never goes below the touch target.

What it looks like

On a scale of 0 to 10, how likely are you to recommend us?
0 = Not at all likely10 = Extremely likely

<NpsSurvey
  question="On a scale of 0 to 10, how likely are you to recommend us?"
  value={nota}
  onChange={setNota}
/>

Props

Import it with import { NpsSurvey } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
onChangerequired(note: number) => void—
questionrequiredstring"Would you recommend the store to a friend?". It is the name of the group.
valuerequirednumber | null—
classNamestringMerged with the library classes; it does not replace them.
commentstringThe comment afterwards. Without `onComment`, nothing is asked.
highEndstring—
lowEndstringWhat 0 and 10 mean. Without this, a scale on its own says nothing.
onComment(text: string) => void—
size"sm" | "md" | "lg"—
tracking(note: number) => stringCustom follow-up question. By default, one depending on the category.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

VariableDefault
--amset-nps-gapvar(--amset-space-4)
--amset-nps-questionvar(--amset-text-base)
--amset-nps-notevar(--amset-text-base)
--amset-nps-endsvar(--amset-text-xs)
--amset-nps-radiusvar(--amset-radius-sm)
--amset-nps-note-min2.25rem

How to change it

.amset-nps {
  --amset-nps-gap: ...;
  --amset-nps-question: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: