KQ-505 · LIKERT/SCALE
Likert Scale
An agreement scale of five or seven nodes on a line. Choosing fills the line up to that node on glide and inflates the node on snap, while the anchors shift weight with it — the near one firms as the far one fades — and hovering previews the fill at a lower weight without committing. A radiogroup with a roving tabindex: arrows move and select, Home and End jump to the ends, Space selects.
KQ-505 · LIKERT/SCALE
The kit list matched what the site needed.
The morning brief left no open questions.
Fieldline crew · kit 4/5 · brief —/7
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/likert-scale
Props
- question
- string
- default —
- The statement being rated; it names the radiogroup.
- points
- 5 | 7
- default 5
- Node count.
- anchors
- [string, string]
- default ["Disagree", "Agree"]
- Labels at the ends; the end nodes borrow them for their names.
- value / defaultValue
- number
- default —
- Controlled or initial 1-based choice.
- onValueChange
- (value: number) => void
- default —
- Fires on choice, with the 1-based value.
| Prop | Type | Default | Description |
|---|---|---|---|
| question | string | — | The statement being rated; it names the radiogroup. |
| points | 5 | 7 | 5 | Node count. |
| anchors | [string, string] | ["Disagree", "Agree"] | Labels at the ends; the end nodes borrow them for their names. |
| value / defaultValue | number | — | Controlled or initial 1-based choice. |
| onValueChange | (value: number) => void | — | Fires on choice, with the 1-based value. |