ColorInput

Capture color data from user
Import

Usage

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

Controlled

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)} />;
}

Formats

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:

<ColorInput
placeholder="Pick color"
label="Your favorite color"
disallowInput
withPicker={false}
swatches={[
...DEFAULT_THEME.colors.red,
...DEFAULT_THEME.colors.green,
...DEFAULT_THEME.colors.blue,
]}
/>

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
<ColorInput
label="Without preview"
placeholder="No color preview"
withPreview={false}
/>
// Replace color preview with any React node
<ColorInput
icon={<BlendingModeIcon />}
label="With icon"
placeholder="With icon"
/>

Input props

Component supports all props from Input and InputWrapper components:

Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
<ColorInput
placeholder="Pick color"
label="Your favorite color"
required
/>

Right section

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

import { useState } from 'react';
import { UpdateIcon } from '@modulz/radix-icons';
import { ActionIcon, ColorInput } from '@mantine/core';
const randomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
function Demo() {
const [value, onChange] = useState(randomColor());
return (
<ColorInput
placeholder="Pick color"
label="Your favorite color"
value={value}
onChange={onChange}
rightSection={
<ActionIcon onClick={() => onChange(randomColor())}>
<UpdateIcon />
</ActionIcon>
}
/>
);
}

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 input ref

You can get input ref with ref prop:

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

Accessibility

Color picker focus

Color picker is not focusable, users without mouse access can select color only by entering it into input manually. If you want to make component accessible do not disable free input.

aria-label

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

<ColorInput /> // -> not ok, input is not labeled
<ColorInput label="My input" /> // -> ok, input and label is connected
<ColorInput aria-label="My input" /> // -> ok, label is not visible but will be announced by screen reader
Build fully functional accessible web applications faster than ever
Feedback
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