Eleven equal boxes from 0 to 10 with end labels. Choosing one reveals Submit.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/nps-scalePlayground
How likely are you to recommend Halcyon to a friend?
Default
How likely are you to recommend Halcyon to a friend?
Selected
How likely are you to recommend Halcyon to a friend?
You picked 9
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/nps-scale
Accessibility
- Native radio inputs in a radiogroup labelled by the question.
- 0 and 10 include their end labels in their names.
- The chosen score is announced.
Motion
- The box inverts in 120 ms, and press scales to 0.98.
- Submit fades in over 240 ms.
- With reduced motion, there is no press and it only fades.
Responsive behavior
- 560 px with 44 px boxes on Web, 358 px with 36 px boxes on Mobile.
Performance
- Eleven native radio inputs and CSS states. Motion runs once, when Submit appears.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import NpsScale. Props: question, low, high, defaultValue, onSubmit, animated.
- onSubmit receives the score from 0 to 10. Submit only shows after a choice.
- It composes Button. The demo does not store the score.
Related
Feedback PromptComponentA yes or no question. Yes opens a note, No adds reason chips, and sending says thanks.RatingComponentFive stars with a label and value. Hover previews up to the pointer.Radio GroupComponentPick exactly one. A surface circle that fills to an ink disc with a dot.QuestionnaireComponentAsks one question at a time in a soft tray, with single or multiple answers, shortcuts, validation, restore, and conditional steps.