Overview
NpsScaleInput renders 11 numbered buttons (0-10) in a horizontal row with endpoint labels. Implements ARIA radiogroup pattern with arrow-key navigation. Used by the NPS DynamicBlock renderer for collecting Net Promoter Scores.
import { NpsScaleInput } from '@/ui/components/nps-scale-input';Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | required | Currently selected score (0-10), or null if unselected |
onChange | (value: number) => void | required | Callback when score changes |
lowLabel | string | - | Label for the low end (0) of the scale. Defaults to i18n "Not at all likely" |
highLabel | string | - | Label for the high end (10) of the scale. Defaults to i18n "Extremely likely" |
disabled | boolean | false | Whether the input is disabled |
ariaLabel | string | - | Accessible label for the radiogroup (question text) |
ariaLabelledBy | string | - | ID of the element that labels this group |
className | string | - | Additional className for the container |
Default (Unselected)
No value selected. Default endpoint labels are applied via i18n.
Not at all likelyExtremely likely
Selected: none
Custom Labels
Custom endpoint labels can be provided via props.
TerribleOutstanding
Selected: none
Without Labels
Passing empty strings hides the endpoint labels while keeping the scale functional.
Selected: none
Pre-filled Value
A value can be pre-selected to show existing data or defaults.
Not at all likelyExtremely likely
Selected: 8
Compact Context
In a narrow container, the scale remains usable with constrained width.
LowHigh
Selected: 6
Disabled
Disabled state for canvas/preview mode. Buttons are non-interactive with reduced opacity.
Not at all likelyExtremely likely