KQ-586 · TIP/PICK
Tip Pick
A tip selector that keeps the arithmetic visible. Choosing a chip slides one shared fill across to it on snap and rolls the tip and total digits in the direction the money moved. Custom unfolds an amount field on glide at a height a ResizeObserver measured, then moves focus into it; the chips are a radio group where arrows wrap, Home and End jump, and Enter or Space commits.
KQ-586 · TIP/PICK
Coldbrook · table 62 covers
Tipon $64.00
- Tip
- $9.60
- Total
- $73.60
Tip $9.60 · total $73.60
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/tip-pick
Props
- subtotal
- number
- default —
- Bill before tip; percentages are taken from it.
- presets
- number[]
- default [10, 15, 20]
- Percentages offered as chips, before Custom and No tip.
- value / defaultValue
- { kind: "percent"; value: number } | { kind: "amount"; value: number } | { kind: "none" }
- default —
- Controlled or initial tip; defaults to the middle preset.
- onValueChange
- (value: TipValue) => void
- default —
- Fires on every chip change and on every keystroke in the custom field.
- format
- (value: number) => string
- default (value) => value.toFixed(2)
- Money formatter — the control never invents a currency.
- label
- string
- default Tip
- Visible group label, which also names the radio group.
| Prop | Type | Default | Description |
|---|---|---|---|
| subtotal | number | — | Bill before tip; percentages are taken from it. |
| presets | number[] | [10, 15, 20] | Percentages offered as chips, before Custom and No tip. |
| value / defaultValue | { kind: "percent"; value: number } | { kind: "amount"; value: number } | { kind: "none" } | — | Controlled or initial tip; defaults to the middle preset. |
| onValueChange | (value: TipValue) => void | — | Fires on every chip change and on every keystroke in the custom field. |
| format | (value: number) => string | (value) => value.toFixed(2) | Money formatter — the control never invents a currency. |
| label | string | Tip | Visible group label, which also names the radio group. |