# ColorField

```ts
import { ColorField } from 'cx/widgets';
```

The `ColorField` widget is used for selecting colors. It displays a color picker dropdown and supports multiple color formats including RGBA, HSLA, and hexadecimal.

```tsx
import { createModel } from "cx/data";
import { LabelsTopLayout } from "cx/ui";
import { ColorField } from "cx/widgets";

interface Model {
  color: string;
  hsla: string;
  hex: string;
  placeholder: string;
}

const m = createModel<Model>();

export default (
  <LabelsTopLayout columns={2}>
    <ColorField label="Standard (RGBA)" value={m.color}  />
    <ColorField label="HSLA Format" value={m.hsla} format="hsla" />
    <ColorField label="Hex Format" value={m.hex} format="hex" />
    <ColorField label="Disabled" value={m.color} disabled />
    <ColorField label="Read-only" value={m.color} readOnly />
    <ColorField
      label="Placeholder"
      value={m.placeholder}
      placeholder="Pick a color..."
    />
  </LabelsTopLayout>
);

```

## Configuration

### Core Properties

| Property      | Type      | Default  | Description                                                    |
| ------------- | --------- | -------- | -------------------------------------------------------------- |
| `value`       | `string`  | `null`   | Color value in rgba, hsla, or hex format                       |
| `format`      | `string`  | `"rgba"` | Output format: `"rgba"`, `"hsla"`, or `"hex"`                  |
| `placeholder` | `string`  |          | Hint text displayed when the field is empty                    |
| `disabled`    | `boolean` | `false`  | Disables the input                                             |
| `enabled`     | `boolean` |          | Opposite of `disabled`                                         |
| `readOnly`    | `boolean` | `false`  | Makes the input read-only                                      |
| `required`    | `boolean` | `false`  | Marks the field as required                                    |
| `label`       | `string`  |          | Field label text                                               |
| `emptyValue`  | `any`     | `null`   | Value written to the store when the field is cleared           |

### Appearance

| Property          | Type            | Default | Description                                             |
| ----------------- | --------------- | ------- | ------------------------------------------------------- |
| `showClear`       | `boolean`       | `true`  | Shows a clear button when the field has a value         |
| `hideClear`       | `boolean`       | `false` | Opposite of `showClear`                                 |
| `alwaysShowClear` | `boolean`       | `false` | Shows clear button even when the field is required      |
| `tooltip`         | `string/object` |         | Tooltip text or configuration                           |
| `inputStyle`      | `string/object` |         | CSS styles applied to the input element                 |
| `inputClass`      | `string`        |         | CSS class applied to the input element                  |

### Behavior

| Property          | Type     | Default | Description                                           |
| ----------------- | -------- | ------- | ----------------------------------------------------- |
| `autoFocus`       | `boolean`| `false` | Automatically focuses the field on mount              |
| `trackFocus`      | `boolean`| `false` | Adds `cxs-focus` CSS class when input is focused      |
| `dropdownOptions` | `object` |         | Additional configuration passed to the dropdown       |

### Validation

| Property         | Type       | Default     | Description                                                        |
| ---------------- | ---------- | ----------- | ------------------------------------------------------------------ |
| `error`          | `string`   |             | Custom error message. Field is marked invalid if set               |
| `visited`        | `boolean`  |             | If `true`, shows validation errors immediately                     |
| `validationMode` | `string`   | `"tooltip"` | How to show errors: `"tooltip"`, `"help"`, `"help-block"`          |
| `onValidate`     | `function` |             | `(value, instance, validationParams) => string` - Custom validation|