# ColorField

> A labeled, described, and validated color field in one call: every id and `aria-describedby` relationship comes from this instance's own stable identifier, so the composed parts stay associated on their own.

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

Composes Label, an Input constrained by `format`'s native
`pattern`, a live ColorSwatch preview of the resolved value, and
any Description or FieldError, wired to this instance's own id.

## Examples

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

```tsx
<ColorField
	label={t("form.brandColor.label")}
	name="brandColor"
	format="rgb"
	defaultValue="rgb(16, 185, 129)"
	description={t("form.brandColor.hint")}
/>
```

```tsx
<ColorField
	label={t("form.themeColor.label")}
	name="themeColor"
	format="hsl"
	value="hsl(210, 90%, 55%)"
	errorMessage={t("form.themeColor.invalid")}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role for the control's focus ring. Defaults to `"neutral"` when omitted. |
| `label` | `RemixNode` | The field's caption, rendered through Label and associated with the control through a native `for`/`id` relationship computed from this instance's own identifier. |
| `description?` | `RemixNode` | Supporting copy rendered through Description beneath the control and referenced by the control's `aria-describedby`. |
| `errorMessage?` | `RemixNode` | Validation message rendered through FieldError beneath the control, referenced by its `aria-describedby`; its presence alone marks `aria-invalid`. Inside a Form carrying `issues`, this prop wins. |
| `autoFocus?` | `boolean` | Native `autofocus`. Defaults to `true` for the first invalid field of an enclosing Form's `issues`, so a server round-trip lands keyboard focus on the first problem while staying script-free. |
| `format?` | `"hex" \| "rgb" \| "hsl"` | Notation the control's `pattern` constrains typed entry to. Defaults to DEFAULT_FORMAT. |
| `name?` | `string` | Native `name` submitted with an enclosing form. |
| `value?` | `string` | Current value, as a literal color string in `format`'s notation, for a control a consumer tracks itself. This same string paints the preview directly. |
| `defaultValue?` | `string` | Initial value, as a literal color string in `format`'s notation, for a control left to the platform's own uncontrolled state. This same string paints the preview directly whenever `value` is unset. |
| `placeholder?` | `string` | Placeholder copy shown while the control is empty. |
| `required?` | `boolean` | Marks the control required for its enclosing form. |
| `disabled?` | `boolean` | Marks the control inert and excluded from the tab order. |
| `readOnly?` | `boolean` | Marks the control's value fixed, while keeping it focusable and included in form submission. |
| `autoComplete?` | `string` | Native autofill hint. |
| `parts?` | `PartsProps` | Per-part styling for this wrapper's internally composed elements. |

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


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role for the control's keyboard focus ring, each mapped to its matching `--ui-*` variables. |
| `Format` | `"hex" \| "rgb" \| "hsl"` | Notation the control's typed value is constrained to through its native `pattern`: `"hex"` for `#rgb`/`#rrggbb` and their alpha forms, `"rgb"` for `rgb()`/`rgba()`, and `"hsl"` for `hsl()`/`hsla()`. |