ColorInput

Capture color data from user

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Your favorite color

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:

Choose color format

Format

import { ColorInput } from '@mantine/core';

function Demo() {
  return <ColorInput defaultValue="#C5D899" />;
}

Disable free input

To disable free input set disallowInput prop:

Your favorite color

import { ColorInput } from '@mantine/core';

function Demo() {
  return <ColorInput disallowInput />;
}

With swatches

You can add any amount of predefined color swatches:

Your favorite color

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:

SwatchesPerRow

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:

Your favorite color

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

Without preview

With icon

import { Paint } 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={<Paint size={16} />}
        label="With icon"
        placeholder="With icon"
      />
    </>
  );
}

Input props

Your favorite color

Placeholder

Label

Description

Error

Variant

Radius

Size

Disabled

Required

import { ColorInput } from '@mantine/core';

function Demo() {
  return (
    <ColorInput
      placeholder="Pick color"
      label="Your favorite color"
      required
    />
  );
}

Right section

Your favorite color

import { useState } from 'react';
import { Refresh } 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())}>
          <Refresh size={16} />
        </ActionIcon>
      }
    />
  );
}

Disabled state

Disabled without value

Disabled with value

import { ColorInput } from '@mantine/core';

function Demo() {
  return <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

import { useRef } from 'react';
import { ColorInput } from '@mantine/core';

function Demo() {
  const ref = useRef<HTMLInputElement>();
  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