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, rgb, rgba, hsl and hsla color formats. Slider to change opacity is displayed only for 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';
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={16} />}
label="With icon"
placeholder="With icon"
/>
</>
);
}

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';
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={16} />
</ActionIcon>
}
/>
);
}

Disabled state

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

Validation state and error

// 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

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
Download more icon variants from https://tabler-icons.io/i/search

ColorInput component props

NameTypeDescription
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
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
number
Width of icon section in px
inputContainer
(children: ReactNode) => ReactNode
Input container component, defaults to React.Fragment
inputWrapperOrder
("input" | "label" | "description" | "error")[]
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
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Input border-radius from theme or number to set border-radius in px
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
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
transition
MantineTransition
Dropdown transition name or object
transitionDuration
number
Dropdown appear/disappear transition duration in ms
transitionTimingFunction
string
Dropdown transition timing function, defaults to theme.transitionTimingFunction
value
string
Controlled component value
variant
"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
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
invalid.mantine-ColorInput-invalidInvalid input modifier
disabled.mantine-ColorInput-disabledInvalid disabled modifier
icon.mantine-ColorInput-iconInput icon wrapper on the left side of the input, controlled by icon prop
withIcon.mantine-ColorInput-withIconInput element styles when used with icon, 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