# Icon Color Picker

> Choose an artwork color with a native picker or hex field, with validation and a reset.

- Name: `icon-color-picker`
- Status: beta
- Categories: forms
- File: the install writes `icon-color-picker.tsx` to your `ui` alias, `@/components/ui` by default.
- Other registry items: `@arbokui/input`, `@arbokui/button`. The install adds them.
- Gallery: https://arbokui.com/components/icon-color-picker
- Registry item: https://arbokui.com/r/icon-color-picker.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the component:

   ```bash
   npx shadcn@latest add @arbokui/icon-color-picker
   ```

## Use it for

- Controlled color editing for icon artwork. Use null to retain the original color.
- Accepts three- or six-digit hex. Invalid input preserves the last valid value.

## Avoid it for

- Replacing the interface theme. Use theme tokens for controls and text.

## Props

- `original`: `string`. Original hex used for the default swatch and placeholder.
- `value`: `string | null`. Chosen hex color, or null for the original.
- `onValueChange`: `(value: string | null) => void`. Called for valid colors and resets.
- `label`: `string`. Default `"Icon color"`. Visible label and accessible name.
- `resetLabel`: `string`. Default `"Use default color"`. Reset action label.
- `disabled`: `boolean`. Default `false`. Disables editing.

## Accessibility

- Both inputs are labeled. Invalid hex has an associated message and aria-invalid.
- Chosen artwork colors are not contrast-checked. Controls retain theme colors.

## Examples

### Controlled artwork

```tsx
<IconColorPickerExample />
```