Color picker

const defaultColors = [
	{
		name: 'Red',
		slug: 'red',
		color: '#FF0000',
	},
	{
		name: 'Green',
		slug: 'green',
		color: '#00FF00',
	},
	{
		name: 'Blue',
		slug: 'blue',
		color: '#0000FF',
	},
	...
];

<ColorPicker
	value={value}
	onChange={(value) => setData(value)}
	colors={myColors}
/>

Tip

In Frontend libs and Frontend libs Tailwind you can use the getOption helper to fetch the color data based on the list in the manifes.

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Allow deselecting a color

<ColorPicker
	value={value}
	onChange={(value) => setData(value)}
	colors={myColors}
	clearable
/>

Disable color grouping

By default, colors are grouped by their names, e.g. red-100, red-200, red-300...

<ColorPicker
	value={value}
	onChange={(value) => setData(value)}
	colors={myColors}
	noColorGroups
/>

Show color hex code in the dropdown

<ColorPicker
	value={value}
	onChange={(value) => setData(value)}
	colors={myColors}
	showColorCode
/>

Picker type

<ColorPicker
	value={value}
	onChange={(value) => setData(value)}
	colors={myColors}
	type='textColor'
/>