# ColorPicker

> A labeled color field composing ColorField's plain fallback with an optional ColorPicker.Group trigger row and ColorPicker.Dialog picking surface swapped in via `children`.

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

Renders ColorPicker's root: ColorField's plain fallback
when `children` is unset, or the trigger-and-panel layout composed from
ColorPicker.Group and ColorPicker.Dialog otherwise.

## Examples

```tsx
<ColorPicker label={t("form.accentColor.label")} name="accentColor" defaultValue="#3b82f6" />
```

```tsx
<ColorPicker>
	<Label htmlFor="brandColor">{t("form.brandColor.label")}</Label>
	<ColorPicker.Group>
		<Input id="brandColor" type="text" name="brandColor" defaultValue="#3b82f6" />
		<ColorPicker.Trigger
			commandfor="brandColor-panel"
			command="toggle-popover"
			aria-label={t("form.brandColor.toggle")}
			value="#3b82f6"
		/>
	</ColorPicker.Group>
	<ColorPicker.Dialog id="brandColor-panel">
		{...the picking surface — see ColorPicker.Dialog's own doc comment}
	</ColorPicker.Dialog>
</ColorPicker>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `Color` | Semantic color role for the fallback field's focus ring. Read only when `children` is unset. |
| `label?` | `RemixNode` | The fallback field's caption, rendered through ColorField. Read only when `children` is unset. |
| `description?` | `RemixNode` | Supporting copy beneath the fallback field. Read only when `children` is unset. |
| `errorMessage?` | `RemixNode` | Validation message beneath the fallback field. Read only when `children` is unset. |
| `format?` | `ColorField.Format` | Notation the fallback field's typed entry is constrained to. Read only when `children` is unset. |
| `name?` | `string` | Native `name` submitted with an enclosing form, read only by the fallback field. |
| `value?` | `string` | Current value, as a literal color string, for a fallback field a consumer tracks itself. |
| `defaultValue?` | `string` | Initial value, as a literal color string, for a fallback field left to the platform's own uncontrolled state. |
| `placeholder?` | `string` | Placeholder copy shown while the fallback field is empty. |
| `required?` | `boolean` | Marks the fallback field required for its enclosing form. |
| `disabled?` | `boolean` | Marks the fallback field inert and excluded from the tab order. |
| `readOnly?` | `boolean` | Marks the fallback field's value fixed, while keeping it focusable and included in form submission. |
| `autoComplete?` | `string` | Native autofill hint for the fallback field. |
| `parts?` | `PartsProps` | Per-part styling for the fallback field's internally composed parts. Read only when `children` is unset. |
| `children?` | `RemixNode` | The trigger-and-panel layout — typically a `Label`, ColorPicker.Group, and ColorPicker.Dialog — rendered in place of ColorField's plain fallback. Unset renders that fallback. |

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


### ColorPicker.Group

Renders ColorPicker's control row: a plain flex host laying the field's own control and ColorPicker.Trigger side by side, with a keyboard focus ring on the whole row the moment focus lands anywhere inside.

Also accepts everything in `TagProps<"div">`.


### ColorPicker.Trigger

Renders ColorPicker's trailing trigger: a `<button>` housing a ColorSwatch that fills it as a live preview, wired via `commandfor`/`command="toggle-popover"` to ColorPicker.Dialog's `id`.

| Prop | Type | Description |
| --- | --- | --- |
| `value` | `string` | The color this trigger previews, already resolved to a literal CSS color value — the same value its inner ColorSwatch paints. Required, since a trigger with nothing to preview has no reason to render. |
| `shape?` | `ColorSwatch.Shape` | Shape variant for the inner ColorSwatch, mirrored onto the button host so its own corners match. Defaults to DEFAULT_TRIGGER_SHAPE. |

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


### ColorPicker.Dialog

Renders ColorPicker's picking surface: a Popover, defaulting `placement` to bottom-start and `role` to `"dialog"`, padding whatever picking controls a consumer composes as `children` in a single column.

Also accepts everything in `Popover.Props`.