Color Picker

A color picker component that allows users to select colors via hex input or a simple interactive color picker interface.

Basic Example

Live Editor

<ColorPicker 
  label="Choose your color" 
  defaultValue="#345CD7"
  pickerButtonTooltipContent="Open color picker"
/>

Result

Loading...

Variants

Color Preview

Show selected color preview along with hex code inside the Color Picker.

Live Editor

<ColorPicker 
  label="Color" 
  defaultValue="#2C52C4" 
  showColorPreview 
  pickerButtonTooltipContent="Open color picker"
/>

Result

Loading...

Disabled State

Prevent user interaction when the color picker is disabled.

Live Editor

<ColorPicker 
  label="Color" 
  defaultValue="#F5A167" 
  disabled 
  pickerButtonTooltipContent="Open color picker"
/>

Result

Loading...

Invalid State

Display validation error when the color input is invalid.

Live Editor

<ColorPicker 
  label="Color" 
  defaultValue="#GGGGGG"
  invalid 
  infoText="Please enter a valid hex color"
  pickerButtonTooltipContent="Open color picker"
/>

Result

Loading...

onChange

The onChange prop is called whenever the color value changes, providing the new hex color value as a string.

Live Editor

function ColorPickerExample() {
  const [selectedColor, setSelectedColor] = React.useState('#884BF0');

  return (
    <>
      <ColorPicker 
        label="Choose your color" 
        defaultValue={selectedColor}
        onChange={(color) => setSelectedColor(color)}
        pickerButtonTooltipContent="Open color picker"
      />
      <div style={{ marginTop: '16px', padding: '12px', backgroundColor: selectedColor, color: 'white', borderRadius: '4px', textShadow: '0 1px 3px #000000CC' }}>
        Selected color: {selectedColor}
      </div>
    </>
  );
}

Result

Loading...

isValidHex Utility

For validation scenarios, you can import the isValidHex utility function directly:

Live Editor

function MyColorPicker() {
  const [color, setColor] = useState('#FF5733');
  const [isInvalidInput, setIsInvalidInput] = useState(false);

  const handleChange = (newColor) => {
    setColor(newColor);
    const valid = isValidHex(newColor);
    setIsInvalidInput(!valid);
  };

  return (
    <ColorPicker
      defaultValue={color}
      onChange={handleChange}
      invalid={isInvalidInput}
      infoText={isInvalidInput ? 'Please enter a valid hex color' : undefined}
      pickerButtonTooltipContent="Open color picker"
    />
  );
}

Result

Loading...

Opacity Input

Enable opacity (alpha) input support by setting the enableOpacity prop:

Live Editor

<ColorPicker 
  label="Choose color with opacity" 
  defaultValue="#E0335ECC"
  enableOpacity 
  showColorPreview 
  pickerButtonTooltipContent="Open color picker"
  opacityInputTooltipContent="Set transparency"
/>

Result

Loading...

Props

ColorPicker

Name	Type	Default
pickerButtonTooltipContent * Tooltip content for the picker button	string	—
label The visual label of the color picker	string	—
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
aria-labelledby	string	—
disabled Native HTML attribute: Link	boolean	—
id Native HTML attribute: Link . Internally, this component uses a random id. We use it to associate an input with a label element. As the random id might break snapshot tests it can be overridden by setting an explicit id.	string	—
onFocus Callback fired when the input gains focus	FocusEventHandler<HTMLInputElement>	—
onBlur Callback fired when the input loses focus	FocusEventHandler<HTMLInputElement>	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
enableOpacity Enable transparency/opacity support	boolean	false
opacityInputTooltipContent Tooltip content for the opacity/alpha input. Required when enableOpacity is true. Tooltip content for the opacity/alpha input. If not provided, no tooltip will be shown	string	—
value The color value in hex format (e.g., '#000000') or hex with alpha (e.g., '#000000FF')	string	—
defaultValue The default color value in hex format or hex with alpha	string	"#000000"
placeholder Placeholder text for the input field	string	000000
infoText Instructions to help users correctly fill in the data	string	—
labelIconTooltip The label info tooltip icon	Omit<TooltipProps, "children">	—
onChange Callback fired when the color changes	((color: string) => void)	—
required Native HTML attribute: Link	boolean	—
optionalText optionalText value to show the field is optional with custom text	string	—
readOnly Native HTML attribute: Link	boolean	—
invalid Visually notify the user that the provided value is invalid	boolean	—
showColorPreview Show color feedback display with color preview and hex value	boolean	false
pickerButtonAriaLabel Aria label for the picker button	string	—
saturationAreaAriaLabel Aria label for the saturation and brightness area	string	—
hueSliderAriaLabel Aria label for the hue slider	string	—
alphaInputAriaLabel Aria label for the alpha/opacity input	string	—
name Native HTML attribute: Link	string	—
ref Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to `null` (or call the ref with `null` if you passed a callback ref). @see {@link Link React Docs}	Ref<HTMLInputElement>	—
key	Key | null	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.