ColorPickerField

ColorPickerField renders a Cratis-owned native color input.

Usage

import { CommandDialog } from '@cratis/components/CommandDialog';
import { ColorPickerField } from '@cratis/components/CommandForm';

<CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
    <ColorPickerField<MyCommand>
        value={c => c.primaryColor}
        title="Primary color"
    />
</CommandDialog>

Props

Prop	Type	Default	Description
value	(instance: TCommand) => unknown	-	Required. Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety.
inline	boolean	false	Renders the picker inline instead of using an overlay.
defaultColor	string	000000	Fallback color used when the bound value is empty.

Behavior

• Default value is an empty string.
• Values are persisted as six-digit hex strings without the leading #.
• Validation state is exposed through aria-invalid on the native color input and data-invalid on the stable root part.