# ColorWheel

> A circular hue picker.

```ts
import { ColorWheel } from "@sdxc/ui";
```

Renders a root `<div>` around a single `<input type="range">` across
hue's `0`–`360` domain, carrying every accessibility and form semantic
this wheel exposes; `colorWheelDrag()` enables the ring rendering.

## Examples

```tsx
<ColorWheel aria-label={t("colorPicker.hue")} defaultValue={210} />
```

```tsx
<ColorWheel aria-label={t("theme.accentHue")} value={hue} name="hue" disabled={isLocked} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `value?` | `number` | Current hue, in degrees `0`–`360`, for a wheel a consumer tracks itself. |
| `defaultValue?` | `number` | Starting hue, in degrees `0`–`360`, for a wheel left to the platform's own uncontrolled state. |
| `step?` | `number` | Degrees a single keypress moves the value by. Defaults to DEFAULT_STEP. |
| `name?` | `string` | Native `name` submitted with an enclosing form. |
| `form?` | `string` | Native `id` of the form the underlying hue input associates with, when it sits outside that form's own markup. |
| `disabled?` | `boolean` | Marks the underlying hue input inert and excluded from the tab order. |
| `parts?` | `PartsProps` | Per-part styling for this wrapper's internally composed hue input. |

Also accepts everything in `Omit<TagProps<"div">, "children">`.