## Swatch Picker (S—058)

A colour radio group whose selection ring springs between swatches, with a live name and hex preview.

- URL: https://sundaeui.dev/components/swatch-picker
- Category: Forms & inputs · Art direction: Playful
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/swatch-picker.json`
- Tags: form, swatch, radio, picker, theme, color

One ring slides between swatches while the chosen dot shrinks inside it. A preview blob takes the colour and casts a matching glow.
Arrow keys move the selection, like any radio group.

### Usage

```tsx
import { SwatchPicker } from '@/components/sundae/swatch-picker'

<SwatchPicker swatches={swatches} value={accent} onValueChange={setAccent} label="Accent colour" />
```

### Props

- `swatches` (`{ name; hex }[]`, required): Options.
- `value` (`string`, required): Selected hex.
- `onValueChange` (`(hex: string) => void`, required): Called on change.
- `shape` (`'circle' | 'square'`, default `'circle'`): Swatch shape.
- `size` (`number`, default `34`): Swatch size, px.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Product variants, theme accents, label colours.

### When not to use

- Arbitrary colours: use a full colour picker.

### Accessibility

- A radiogroup with roving tabindex; each swatch is named ("Lagoon").
- Visible focus ring offset from the swatch.
- Reduced motion removes the ring slide.

### Keyboard

- ← / →: Previous / next colour