# AccentPicker

> Exclusive swatch picker.

Source: https://ui.jcsoftdev.com/docs/components/accent-picker

Exclusive swatch picker. Controlled or uncontrolled; the root exposes
`data-accent` with the active option so consumers can read it. Applying the
value to the document is the consumer's responsibility.

## Import

```ts
import { AccentPicker } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/accent-picker`.

## Usage

```tsx
<AccentPicker
  options={options}
  defaultValue="coral"
  aria-label="Color de la barbería"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` * | `AccentOption[]` |  |  |
| `value` | `string` |  |  |
| `defaultValue` | `string` |  |  |
| `onValueChange` | `((value: string) => void)` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/forms-accentpicker--default)
- [Disabled](/storybook/?path=/story/forms-accentpicker--disabled)
- [Controlled](/storybook/?path=/story/forms-accentpicker--controlled)

## Source

`packages/ui/src/forms/accent-picker/accent-picker.tsx`