# Color Selector

A single choice among color swatches, on a native radio group.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/color-selector
```

## Usage

```tsx
import { ColorSelector } from '@/components/fetaui/color-selector'

export function Example() {
  return <ColorSelector legend="Color" onValueChange={setColor} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| legend | string | Color |
| options | ColorOption[] | 6 colors |
| value | string |  |
| defaultValue | string | first option |
| onValueChange | (value) => void |  |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For picking a color from a short set.

## When not to use

- For any color: use a color picker.

## Accessibility

- Native radio inputs, each named for its color.
- The chosen name is shown as text, so color is never the only signal.

## Motion

- The ring grows around the chosen swatch.
- With reduced motion, the ring fades in.