Inputs@knitui/components

AngleSlider

AngleSlider lets users pick an angle (0–359°) by dragging around a circular ring or using arrow keys. It supports marks, custom label formatting, step snapping, and controlled/uncontrolled usage.

WebiOSAndroid8 style slots15 own props11 examples

Stories Source Tests Open in Storybook

import { AngleSlider } from "@knitui/components";

Playground

Loading playground…

sizeDiameter token from the $size scale. Numeric px values are also supported.

stepAngle step between selectable values.

withLabelShow the current value in the centre of the ring.

true

disabledDisable all interactions.

false

restrictToMarksRestrict selectable values to the marks array.

false

defaultValueUncontrolled initial value.

Playground

<AngleSlider
  aria-label="angle"
  size="xxl"
  step={1}
  withLabel
  disabled={false}
  restrictToMarks={false}
/>

Examples

Sizes

Full token size scale, from xxs to xxl.

Loading example…

SizesSource Storybook

Shadows

Elevation via the shared shadow ladder — inherited from Box, so every component accepts it; no shadow unless set.

Loading example…

ShadowsSource Storybook

Numeric Size

Numeric custom diameter for exact pixel-sized use cases.

Loading example…

Numeric SizeSource Storybook

Disabled

Disabled state — reduced opacity and all pointer/keyboard interactions suppressed.

Loading example…

DisabledSource Storybook

With Marks

Marks displayed around the ring at cardinal and ordinal angles.

Loading example…

With MarksSource Storybook

Restricted To Marks

restrictToMarks snaps the thumb to the nearest mark; arrow keys cycle between them.

Loading example…

Restricted To MarksSource Storybook

Custom Label

formatLabel replaces the plain number with a custom React node.

Loading example…

Custom LabelSource Storybook

Controlled

Fully controlled — the external state drives the slider and is displayed next to it.

Loading example…

ControlledSource Storybook

No Label

withLabel={false} hides the centre value, leaving a clean ring.

Loading example…

No LabelSource Storybook

Styles

Per-slot styles targets individual parts — here the frame, thumbKnob, and label.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`aria-label`	`string \| undefined`	`angle`	Accessible label for the slider thumb.
`defaultValue`	`number \| undefined`	`0`	Uncontrolled initial value.
`disabled` system	`boolean \| undefined`	`false`	Disable all interactions.
`formatLabel`	`((value: number) => ReactNode) \| undefined`	—	Format the centre label from the current value.
`marks`	`AngleSliderMark[] \| undefined`	—	Marks displayed around the ring.
`name`	`string \| undefined`	—	Hidden input `name`, for uncontrolled form submission.
`onChange`	`((value: number) => void) \| undefined`	—	Called on every value change while dragging / on key press.
`onChangeEnd`	`((value: number) => void) \| undefined`	—	Called once the selection is finished (pointer up / key press).
`onScrubEnd`	`(() => void) \| undefined`	—	Called when a scrub gesture ends (pointer up).
`onScrubStart`	`(() => void) \| undefined`	—	Called when a scrub gesture starts (pointer down).
`restrictToMarks`	`boolean \| undefined`	`false`	Restrict selectable values to the marks array.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—	—
`size` system	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`"xxl"`	Diameter token from the $size scale. Numeric px values are also supported.
`step`	`number \| undefined`	`1`	Angle step between selectable values.
`styles` system	`SlotStyles<AngleSliderStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`tabIndex`	`number \| undefined`	—	Tab index of the focusable thumb.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`thumbSize`	`number \| undefined`	—	Length of the thumb knob in px. Derived from `size` by default.
`value`	`number \| undefined`	—	Controlled value (0–359).
`withLabel`	`boolean \| undefined`	`true`	Show the current value in the centre of the ring.

Style slots

Every part of AngleSlider can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Targets
`frame`	Props for the ring root (`AngleSlider.Frame`).
`label`	Props for the centre value label (`AngleSlider.Label`).
`mark`	Props for each rotated mark wrapper (`AngleSlider.Mark`).
`markLabel`	Props for each mark label (`AngleSlider.MarkLabel`).
`marks`	Props for the marks container (`AngleSlider.Marks`).
`markTick`	Props for each mark tick (`AngleSlider.MarkTick`).
`thumb`	Props for the rotated thumb bar (`AngleSlider.Thumb`).
`thumbKnob`	Props for the visible thumb knob (`AngleSlider.ThumbKnob`).

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 495 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.