## Tick Gauge (S—063)

A half-dial of ticks that light up to a value, with a longer lead tick. Drag the arc or use the keys.

- URL: https://sundaeui.dev/components/tick-gauge
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/tick-gauge.json`
- Tags: meter, dial, chart, slider, svg, gauge

Ticks fill from left to right up to the value, and the lead tick is drawn longer so the reading has a clear edge without a needle.
It is a real slider: drag along the arc, or use the arrow, Page and Home/End keys. Leave it uncontrolled for an input, or pass value for a read-only style meter.

### Usage

```tsx
import { TickGauge } from '@/components/sundae/tick-gauge'

<TickGauge label="CPU load" defaultValue={64} caption="8 cores" />
```

### Props

- `label` (`string`, required): Visible label and accessible name.
- `value / defaultValue` (`number`, default `50`): Controlled or starting value.
- `onValueChange` (`(value: number) => void`): Called while dragging or on key presses.
- `min / max / step` (`number`, default `0 / 100 / 1`): Range and step.
- `unit` (`string`, default `'%'`): Shown after the number.
- `ticks` (`number`, default `41`): Ticks on the arc.
- `caption` (`string`): Small line under the dial.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Dashboards that show one reading against a fixed range: load, battery, quota.
- Settings where a dial is easier to read than a slider, like a thermostat.

### When not to use

- Comparing several values: use bars.
- Values with no meaningful maximum.

### Accessibility

- The dial is role="slider" with aria-valuenow, min, max and a readable aria-valuetext.
- Arrow, Page and Home/End keys follow the slider pattern; a visible focus ring sits around the dial.
- Reduced motion removes the tick colour transition.

### Keyboard

- ← / → or ↑ / ↓: Step the value
- Page Up / Down: Jump a tenth of the range
- Home / End: Minimum or maximum

### FAQ

**Can it be read-only?**
Pass value without onValueChange and it still renders as a meter; add aria-readonly on the dial if you do.

**Why ticks instead of an arc?**
Ticks stay crisp at any size and read as a scale, so a reading is easier to estimate at a glance.