Capture color data from user


<ColorInput placeholder="Pick color" label="Your favorite color" />


import { useState } from 'react';
import { ColorInput } from '@mantine/core';
function Demo() {
const [value, setValue] = useState('');
return <ColorInput value={value} onChange={(event) => setValue(event.currentTarget.value)} />;


Component supports hex, rgb, rgba, hsl and hsla color formats. Slider to change opacity is displayed only for rgba and hsla formats:

<ColorInput />

Disable free input

To disable free input set disallowInput prop:

<ColorInput disallowInput />

With swatches

You can add any amount of predefined color swatches:

<ColorInput format="hex" swatches={['#25262b','#868e96','#fa5252','#e64980','#be4bdb','#7950f2','#4c6ef5','#228be6','#15aabf','#12b886','#40c057','#82c91e','#fab005','#fd7e14']} />

By default there will be 10 swatches per row, you can change this with swatchesPerRow prop, like in ColorPicker component:

<ColorPicker format="hex" swatches={['#25262b','#868e96','#fa5252','#e64980','#be4bdb','#7950f2','#4c6ef5','#228be6','#15aabf','#12b886','#40c057','#82c91e','#fab005','#fd7e14']} />

If you need to restrict color picking to certain colors – disable color picker and disallow free input:

placeholder="Pick color"
label="Your favorite color"

Remove or replace preview

By default color preview will be rendered on the left side of the input, you can remove it (withPreview={false} prop) or replace with any React node (icon prop):

// Remove color preview
label="Without preview"
placeholder="No color preview"
// Replace color preview with any React node
icon={<BlendingModeIcon />}
label="With icon"
placeholder="With icon"

Input props

Component supports all props from Input and InputWrapper components:

placeholder="Pick color"
label="Your favorite color"

Right section

Like most other inputs ColorInput supports right section, for example, you can add random color button there:

<ColorInput placeholder="Pick color" label="Your favorite color" />

Disabled state

<ColorInput disabled />

Validation state and error

You cannot pick white
// Error as boolean – red border color
<ColorInput error />
// Error as React node – red border color and message below input
<ColorInput error="You cannot pick white" />

Get element ref

You can get input ref with elementRef prop:

import { useRef } from 'react';
import { ColorInput } from '@mantine/core';
function Demo() {
const ref = useRef(null);
return <ColorInput elementRef={ref} />;

Server side rendering

Component uses use-id hook to generate unique ids and aria- attributes, provide static id prop to prevent props mismatch:

<ColorInput /> // -> random id generated both on client and server, props mismatch warning
<ColorInput id="my-input" /> // -> id is static, no mismatches


Provide aria-label in case you use component without label for screen reader support:

<ColorInput label="My input" />; // -> ok, input and label is connected
<ColorInput />; // not ok, input is not labeled
<ColorInput aria-label="My input" />; // -> ok, label is not visible but will be announced by screen reader
Build fully functional accessible web applications with ease
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback