KQ-1150 · ANGLE/PICK
Angle Pick
An angle input for a design tool: a dial whose handle sits under the finger as it turns, a field that takes typed degrees, and a live gradient, shadow or arrow that follows the handle through every spring. Pressed away from the handle, it swings there the short way on the snap spring; dragged, it catches up on the flick spring and then holds 1:1; with Shift it jumps between snap marks on flick like detents; a real spin coasts to its projected landing on a critically damped spring, ticking past the marks, while a slow release stays put. Arrows turn a degree, Shift+Arrow and PageUp/PageDown to the next mark, Home and End to the ends, and the field's own arrows do the same.
135° · south-east · shift snaps to 15°
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/angle-pick
Props
- value / defaultValue
- number
- default 0
- The angle in whole degrees, clockwise from the top: 0 to 359, or −90 to 90 at range 180. Controlled or uncontrolled; a value the host refuses is turned back to.
- onValueChange
- (degrees: number) => void
- default —
- Fires from the drag, tap, key, throw or typed entry that changed the angle.
- label
- string
- default "Angle"
- What the angle sets: the group's and dial's name, shown over the preview (the field is "<label> in degrees").
- snap
- number
- default 15
- The Shift step and the PageUp/PageDown step in degrees, 5 to 45. The ring's marks and the ticks fall on it.
- preview
- "gradient" | "shadow" | "arrow"
- default "gradient"
- What follows the dial: a gradient whose bright end is where the handle points, a card whose shadow falls that way, or an arrow over a small compass.
- readout
- boolean
- default true
- Show the live angle in the dial's hub, counting through every spring. Off, the hub is a small cap.
- range
- 360 | 180 | "360" | "180"
- default "360"
- A full turn, 0 to 359 and wrapping, or a half turn, −90 to 90 with 0 at the top, that rubber-bands past either end.
- sound
- boolean
- default false
- A tick at every snap mark the handle passes, pitched up with the angle and a touch louder at 0°. Nothing plays, and no audio context exists, unless this is on.
- disabled
- boolean
- default false
- Dims the control, takes the dial out of the tab order, disables the field and ignores drags.
- className
- string
- default —
- Merged onto the root's classes.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | 0 | The angle in whole degrees, clockwise from the top: 0 to 359, or −90 to 90 at range 180. Controlled or uncontrolled; a value the host refuses is turned back to. |
| onValueChange | (degrees: number) => void | — | Fires from the drag, tap, key, throw or typed entry that changed the angle. |
| label | string | "Angle" | What the angle sets: the group's and dial's name, shown over the preview (the field is "<label> in degrees"). |
| snap | number | 15 | The Shift step and the PageUp/PageDown step in degrees, 5 to 45. The ring's marks and the ticks fall on it. |
| preview | "gradient" | "shadow" | "arrow" | "gradient" | What follows the dial: a gradient whose bright end is where the handle points, a card whose shadow falls that way, or an arrow over a small compass. |
| readout | boolean | true | Show the live angle in the dial's hub, counting through every spring. Off, the hub is a small cap. |
| range | 360 | 180 | "360" | "180" | "360" | A full turn, 0 to 359 and wrapping, or a half turn, −90 to 90 with 0 at the top, that rubber-bands past either end. |
| sound | boolean | false | A tick at every snap mark the handle passes, pitched up with the angle and a touch louder at 0°. Nothing plays, and no audio context exists, unless this is on. |
| disabled | boolean | false | Dims the control, takes the dial out of the tab order, disables the field and ignores drags. |
| className | string | — | Merged onto the root's classes. |