Color Field

This component is based on the input element and supports common margin props m, mx, my, ml, mr, mt, mb. View source.

The field value is selected on click, unless the input has already been focused.

When blurred, the Color Field calls onValueChange, parsing the current value or resetting it to the last seen valid color.

Pressing the Enter key in the Color Field calls onValueChange, parsing the current value or resetting it to the last seen valid color. Form submission is prevented until the current value matches the last seen valid color.

Pressing the Escape key in the Color Field resets the current value to the last saved color. Components like dialogs won’t close until the current value matches the last seen valid color.

Use value and onValueChange to create a controlled Color Field. The onValueChange callback returns valid hex colors only.

() => {
  const [value, setValue] = React.useState('6665EC');
  return <ColorField value={value} onValueChange={setValue} />;
};