Likert scale
Survey agreement scales in 5 or 7 points as a dot track or drawn face glyphs, plus a matrix of statements with a sticky header and progress.
Preview
Quarterly product survey
3 of 6 answered
| Statement | Strongly disagree | Disagree | Neutral | Agree | Strongly agree |
|---|---|---|---|---|---|
| I can find what I need quickly | |||||
| I trust the numbers on my dashboard | |||||
| Pages load fast enough | |||||
| Help articles answer my questions | |||||
| I would suggest this to a colleague | |||||
| The mobile layout works well |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| question | ReactNode | — | Statement shown as the fieldset legend. |
| points | 5 | 7 | 5 | Number of scale points. |
| labels | string[] | agreement wording | One label per point. |
| value | number | null | — | Controlled 1-based choice. |
| defaultValue | number | null | null | Uncontrolled starting choice. |
| onValueChange | (value: number) => void | — | Called when a point is chosen. |
| variant | "dots" | "faces" | "dots" | Joined dot track or drawn faces. |
| name | string | auto | Form field name for the radios. |
| disabled | boolean | false | Disables the scale. |
| statements (LikertMatrix) | { id: string; text: string }[] | — | Rows of the matrix variant. |
| value (LikertMatrix) | Record<string, number> | — | Answers by statement id; also defaultValue/onValueChange. |
| caption / maxHeight (LikertMatrix) | ReactNode / number | — / 320 | Table caption and scroll height (header stays pinned). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.