KQ-803 · THUMBS/MORPH
Thumbs Morph
Two outline thumbs whose glyph fills on press: a solid copy of the same path is revealed by a wrapper whose height grows on snap, rising from the base for the up thumb and sinking from the top for the down thumb, and pressing again drains it. A down press unfolds a reason chip row beneath, its box gliding to a ResizeObserver-measured height while the chips arrive on a cascade with a four-pixel nudge on snap; up, or clearing, folds it away. Both thumbs and every chip are toggle buttons reached by Tab and pressed with Space or Enter.
Route 14 is running forty minutes behind because the depot held it for a late trailer. The next two stops will be reached in order; no parcels need re-routing unless the delay passes ninety minutes.
No verdict
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/thumbs-morph
Props
- value / defaultValue
- ThumbsValue | null
- default null
- Controlled or initial verdict: "up", "down", or null while nothing is chosen.
- onValueChange
- (value: ThumbsValue | null) => void
- default —
- Fires from the thumb press that changed the verdict.
- reasons
- ThumbsReason[]
- default five house reasons
- The chips offered after a down press: id and label.
- chosen / defaultChosen
- string[]
- default []
- Controlled or initial chosen reason ids; chips are multi-select.
- onChosenChange
- (ids: string[]) => void
- default —
- Fires from the chip press that toggled a reason.
- subject
- string
- default "answer"
- Names what is being rated in the group and thumb labels.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | ThumbsValue | null | null | Controlled or initial verdict: "up", "down", or null while nothing is chosen. |
| onValueChange | (value: ThumbsValue | null) => void | — | Fires from the thumb press that changed the verdict. |
| reasons | ThumbsReason[] | five house reasons | The chips offered after a down press: id and label. |
| chosen / defaultChosen | string[] | [] | Controlled or initial chosen reason ids; chips are multi-select. |
| onChosenChange | (ids: string[]) => void | — | Fires from the chip press that toggled a reason. |
| subject | string | "answer" | Names what is being rated in the group and thumb labels. |