ColorInput

Capture color data from user

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Your favorite color

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

Choose color format

Format

<ColorInput />

Disable free input

To disable free input set disallowInput prop:

Your favorite color

<ColorInput disallowInput />

With swatches

You can add any amount of predefined color swatches:

Your favorite color

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

SwatchesPerRow

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

Your favorite color

<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):

Without preview

With icon

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

Your favorite color *

Placeholder

Label

Description

Error

Variant

Radius

Size

Disabled

Required

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

Your favorite color

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

Disabled without value

Disabled with value

<ColorInput disabled />

Validation state and error

Your favorite color

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

<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