ColorInput
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:
<ColorInputplaceholder="Pick color"label="Your favorite color"disallowInputwithPicker={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<ColorInputlabel="Without preview"placeholder="No color preview"withPreview={false}/>// Replace color preview with any React node<ColorInputicon={<BlendingModeIcon />}label="With icon"placeholder="With icon"/>
Input props
Component supports all props from Input and InputWrapper components:
<ColorInputplaceholder="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:
<ColorInput placeholder="Pick color" label="Your favorite color" />
Disabled state
<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 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
Accessibility
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