ColorField

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.

 <LabelsTopLayout columns={2}>
  <ColorField label="Standard (RGBA)" value={m.color} autoFocus />
  <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> 
 interface Model {
  color: string;
  hsla: string;
  hex: string;
  placeholder: string;
}

const m = createModel<Model>(); 
 import { createModel } from "cx/data";
import { LabelsTopLayout } from "cx/ui";
import { ColorField } from "cx/widgets"; 

Standard (RGBA)	HSLA Format

Hex Format	Disabled

Read-only	Placeholder

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