Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

ColorInput

Capture color from user

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

ColorInput component supports Input and Input.Wrapper components features and all input element props. ColorInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

Input description

Variant
Size
Radius
import { ColorInput } from '@mantine/core';

function Demo() {
  return (
    <ColorInput
      label="Input label"
      description="Input description"
      placeholder="Input placeholder"
    />
  );
}

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:

Swatches per row
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,
      ]}
    />
  );
}

Eye dropper

By default, if EyeDropper API is available, eye dropper icon will be displayed at the right section of the input. To disable it, set withEyeDropper={false}.

Error state

Invalid name

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

function Demo() {
  return (
    <>
      <ColorInput label="Boolean error" placeholder="Boolean error" error />
      <ColorInput
        mt="md"
        label="With error message"
        placeholder="With error message"
        error="Invalid name"
      />
    </>
  );
}

Disabled state

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

function Demo() {
  return <ColorInput disabled label="Disabled input" placeholder="Disabled input" />;
}

Styles API

ColorInput supports Styles API, you can add styles to any inner element of the component withclassNames prop. Follow Styles API documentation to learn more.

Description

Error

Component Styles API

Hover over selectors to highlight corresponding elements

/*
 * Hover over selectors to apply outline styles
 *
 */

Get element ref

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

function Demo() {
  const ref = useRef<HTMLInputElement>(null);
  return <ColorInput ref={ref} />;
}

Accessibility

If ColorInput is used without label prop, it will not be announced properly by screen reader:

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

// Inaccessible input – screen reader will not announce it properly
function Demo() {
  return <ColorInput />;
}

Set aria-label to make the input accessible. In this case label will not be visible, but screen reader will announce it:

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

// Accessible input – it has aria-label
function Demo() {
  return <ColorInput aria-label="My input" />;
}

If label prop is set, input will be accessible it is not required to set aria-label:

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

// Accessible input – it has associated label element
function Demo() {
  return <ColorInput label="My input" />;
}

Previous

Chip

Next

ColorPicker

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord communityFollow Mantine on Twitter