Color Picker

import ColorPicker from 'frui/field/Color;

Copy

Props

Name	Type	Required	Notes
value	string	No	Current color (hex, rgba). If undefined, component is uncontrolled.
defaultValue	string	No	Initial color if `value` is undefined (uncontrolled).
onChange	function	No	Callback `(color: string) => void` returning rgba string.
showAlpha	boolean	No (true)	Show alpha slider and input.
showInputs	boolean	No (true)	Show RGBA input fields.
swatches	string[]	No	Array of hex/rgba colors for swatches.
pickerStyle	CSS Object	No	Custom CSS for the picker popover element.
pickerClassName	string	No	Custom class name for the picker popover element.
className	string	No	Class names for the main wrapper div.
style	CSS Object	No	Inline styles for the main wrapper div.
box	boolean	No (true)	Show color preview box in display.
text	boolean	No (true)	Show color text value in display.
lg	boolean	No	Use large size for display.
md	boolean	No	Use medium size for display.
sm	boolean	No	Use small size for display.

Basic Usage (Controlled)

Provide value and onChange props for a controlled component. The component expects hex or rgba strings as input and outputs an rgba string.

rgba(75, 146, 227, 1.00)

Selected: rgba(74, 144, 226, 1)

<ColorPicker
  value={color}
  onChange={newRgbaColor => setColor(newRgbaColor)}
/>

Copy

Uncontrolled Usage

Omit the value prop to use the component in uncontrolled mode. You can set an initial color with defaultValue. Use a ref or form submission to get the final value if needed, or use onChange just to react to changes.

rgba(245, 164, 34, 1.00)

Default: rgba(245, 166, 35, 1)

<ColorPicker
  defaultValue="rgba(245, 166, 35, 1)"
  onChange={newColor => console.log(newColor)}
/>

Copy

Customization

Customize the picker's features like alpha, inputs, and swatches.

No Alpha

rgba(255, 107, 107, 0.80)

No Inputs

rgba(255, 107, 107, 0.80)

Custom Swatches

rgba(255, 107, 107, 0.80)

Default Swatches

rgba(75, 146, 227, 1.00)

<ColorPicker value={color} onChange={setColor} showAlpha={false} />

<ColorPicker value={color} onChange={setColor} showInputs={false} />

<ColorPicker
  value={color}
  onChange={setColor}
  swatches={['#FF6B6B', '#4ECDC4', 'rgba(69, 183, 209, 0.7)', '#F7B801', '#5F4B8B']}
/>

const defaultSwatches = ['#D0021B'];
<ColorPicker value={color} onChange={setColor} swatches={defaultSwatches} />

Copy

Layout & Style

Adjust the trigger display using sm, md, lg, box={false}, or text={false}. Use className or style for the wrapper, and pickerClassName, or pickerStyle for the popover.

Large / No Text

Small / No Box

rgba(75, 146, 227, 1.00)

Custom Popover Class

rgba(75, 146, 227, 1.00)

Custom Popover Style

rgba(75, 146, 227, 1.00)

<ColorPicker value={color} onChange={setColor} lg text={false} />

<ColorPicker value={color} onChange={setColor} sm box={false} />

<ColorPicker value={color} onChange={setColor} pickerClassName="custom-popover" />

<ColorPicker
  value={color}
  onChange={setColor}
  pickerStyle={{ background: '#f0f0f0', width: '280px' }}
/>

Copy

Code Editor

Country