ColorInput

Capture color data from user
Import

Usage

import { ColorInput } from '@mantine/core';
function Demo() {
return <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={setValue} />;
}

Formats

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

import { ColorInput } from '@mantine/core';
function Demo() {
return <ColorInput defaultValue="#C5D899" />;
}

Disable free input

To disable free input set disallowInput prop:

import { ColorInput } from '@mantine/core';
function Demo() {
return <ColorInput disallowInput />;
}

With swatches

You can add any amount of predefined color swatches:

import { ColorInput } from '@mantine/core';
function Demo() {
return (
<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:

import { ColorPicker } from '@mantine/core';
function Demo() {
return (
<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:

import { ColorInput, DEFAULT_THEME } from '@mantine/core';
function Demo() {
return (
<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):

import { IconPaint } from '@tabler/icons-react';
import { ColorInput } from '@mantine/core';
function Demo() {
return (
<>
{/* Remove color preview */}
<ColorInput
label="Without preview"
placeholder="No color preview"
withPreview={false}
/>
{/* Replace color preview with any React node */}
<ColorInput
icon={<IconPaint size="1rem" />}
label="With icon"
placeholder="With icon"
/>
</>
);
}

Eye dropper

Set withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

import { ColorInput } from '@mantine/core';
function Demo() {
return (
<ColorInput
withEyeDropper
placeholder="With eye dropper"
label="Pick any color from the page"
/>
);
}

Input props

Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { ColorInput } from '@mantine/core';
function Demo() {
return (
<ColorInput
placeholder="Pick color"
label="Your favorite color"
withAsterisk
/>
);
}

Right section

import { useState } from 'react';
import { IconRefresh } from '@tabler/icons-react';
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())}>
<IconRefresh size="1rem" />
</ActionIcon>
}
/>
);
}

Disabled state

import { ColorInput } from '@mantine/core';
function Demo() {
return <ColorInput disabled />;
}

Validation state and error

You cannot pick white
import { ColorInput } from '@mantine/core';
function Demo() {
return (
<>
{/* Error as boolean – red border color */}
<ColorInput label="Your favorite color" placeholder="Enter color" error />
{/* Error as React node – red border color and message below input */}
<ColorInput
mt="md"
label="Your favorite color"
placeholder="Enter color"
error="You cannot pick white"
/>
</>
);
}

Get input ref

import { useRef } from 'react';
import { ColorInput } from '@mantine/core';
function Demo() {
const ref = useRef<HTMLInputElement>(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

ColorInput component props

NameTypeDescription
closeOnColorSwatchClick
boolean
Determines whether the dropdown should be closed when color swatch is clicked, false by default
defaultValue
string
Uncontrolled component default value
description
ReactNode
Input description, displayed after label
descriptionProps
Record<string, any>
Props spread to description element
disabled
boolean
Disabled input state
disallowInput
boolean
Disallow free input
dropdownZIndex
number
Dropdown element z-index
error
ReactNode
Displays error message after input
errorProps
Record<string, any>
Props spread to error element
eyeDropperIcon
ReactNode
Replaces default eye dropper icon
eyeDropperLabel
string
aria-label for eye dropper button
fixOnBlur
boolean
call onChange with last valid value onBlur
format
"hex" | "hexa" | "rgba" | "rgb" | "hsl" | "hsla"
Color format
icon
ReactNode
Adds icon on the left side of input
iconWidth
Width<string | number>
Width of icon section
inputContainer
(children: ReactNode) => ReactNode
Input container component, defaults to React.Fragment
inputWrapperOrder
("input" | "label" | "error" | "description")[]
Controls order of the Input.Wrapper elements
label
ReactNode
Input label, displayed before input
labelProps
Record<string, any>
Props spread to label element
onChange
(color: string) => void
Called when color changes
onChangeEnd
(color: string) => void
Called when user stops dragging thumb or changes value with arrows
portalProps
Omit<PortalProps, "children" | "withinPortal">
Props to pass down to the portal when withinPortal is true
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
required
boolean
Adds required attribute to the input and red asterisk on the right side of label
rightSection
ReactNode
Right section of input, similar to icon but on the right
rightSectionProps
Record<string, any>
Props spread to rightSection div element
rightSectionWidth
Width<string | number>
Width of right section, is used to calculate input padding-right
shadow
MantineShadow
Dropdown box-shadow, key of theme.shadows
size
"xs" | "sm" | "md" | "lg" | "xl"
Input size
swatches
string[]
Predefined colors
swatchesPerRow
number
Number of swatches displayed in one row
transitionProps
Partial<Omit<TransitionProps, "mounted">>
Props added to Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 0, transition: 'fade' } by default
value
string
Controlled component value
variant
Variants<"unstyled" | "default" | "filled">
Defines input appearance, defaults to default in light color scheme and filled in dark
withAsterisk
boolean
Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
withEyeDropper
boolean
Determines whether eye dropper button should be displayed in the right section, true by default
withPicker
boolean
Set to false to display swatches only
withPreview
boolean
Display swatch with color preview on the left side of input
withinPortal
boolean
Whether to render the dropdown in a Portal
wrapperProps
Record<string, any>
Properties spread to root element

ColorInput component Styles API

NameStatic selectorDescription
wrapper.mantine-ColorInput-wrapperRoot element
icon.mantine-ColorInput-iconInput icon wrapper on the left side of the input, controlled by icon prop
input.mantine-ColorInput-inputMain input element
rightSection.mantine-ColorInput-rightSectionInput right section, controlled by rightSection prop
root.mantine-ColorInput-rootRoot element
label.mantine-ColorInput-labelLabel element styles, defined by label prop
error.mantine-ColorInput-errorError element styles, defined by error prop
description.mantine-ColorInput-descriptionDescription element styles, defined by description prop
required.mantine-ColorInput-requiredRequired asterisk element styles, defined by required prop
body.mantine-ColorInput-bodyIncludes hue and alpha sliders and color preview
preview.mantine-ColorInput-previewColor preview
sliders.mantine-ColorInput-slidersHue and alpha sliders wrapper
slider.mantine-ColorInput-sliderAlpha and hue sliders
sliderOverlay.mantine-ColorInput-sliderOverlayHue and alpha sliders overlays
thumb.mantine-ColorInput-thumbHue, alpha and saturation sliders thumbs
saturation.mantine-ColorInput-saturationSaturation slider
swatch.mantine-ColorInput-swatchColorSwatch component in swatches list
swatches.mantine-ColorInput-swatchesWrapper around all swatches
dropdown.mantine-ColorInput-dropdownDropdown root element
arrow.mantine-ColorInput-arrowDropdown arrow