ColorInput

Capture color data from user

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/core

Usage

Your favorite color

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

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

Controlled

import { useState } from 'react';
import { ColorInput } from '@asuikit/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:

Choose color format

Format

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

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

Disable free input

To disable free input set disallowInput prop:

Your favorite color

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

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

With swatches

You can add any amount of predefined color swatches:

Your favorite color

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

function Demo() {
  return (
    <ColorInput
      format="hex"
      swatches={['#616161', '#9985FF', 'rgba(0, 0, 0, 0.7)', '#2BD695', '#EB5E52', '#5C92FF', '#FFD042', '#FF9966', '#25262b', '#616161', '#e64980', '#be4bdb', '#4c6ef5', '#15aabf', '#12b886', '#82c91e', '#F5F5F5', '#FFFFFF', '#29CC6A', '#FC5555', '#0A0A0A', '#fff']}
    />
  );
}

By default, there will be 10 swatches per row, you can change this with swatchesPerRow prop, like in ColorPicker component:

SwatchesPerRow

import { ColorPicker } from '@asuikit/core';

function Demo() {
  return (
    <ColorPicker format="hex" swatches={['#616161', '#9985FF', 'rgba(0, 0, 0, 0.7)', '#2BD695', '#EB5E52', '#5C92FF', '#FFD042', '#FF9966', '#25262b', '#616161', '#e64980', '#be4bdb', '#4c6ef5', '#15aabf', '#12b886', '#82c91e', '#F5F5F5', '#FFFFFF', '#29CC6A', '#FC5555', '#0A0A0A', '#fff']} />
  );
}

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 '@asuikit/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 { IconPaint } from '@tabler/icons-react';
import { ColorInput } from '@asuikit/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="1rem" />}
        label="With icon"
        placeholder="With icon"
      />
    </>
  );
}

Eye dropper

Set withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

Pick any color from the page

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

function Demo() {
  return (
    <ColorInput
      withEyeDropper
      placeholder="With eye dropper"
      label="Pick any color from the page"
    />
  );
}

Input props

Your favorite color

Placeholder

Label

Description

Error

Variant

Radius

Size

Disabled

With asterisk

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

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

Right section

Your favorite color

import { useState } from 'react';
import { IconRefresh } from '@tabler/icons-react';
import { ActionIcon, ColorInput } from '@asuikit/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="1rem" />
        </ActionIcon>
      }
    />
  );
}

Disabled state

Disabled without value

Disabled with value

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

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

Validation state and error

Your favorite color

You cannot pick white

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

function Demo() {
  return (
    <>
      {/* Error as boolean – red border color */}
      <ColorInput label="Your favorite color" placeholder="Enter color" error />

      {/* Error as React node – red border color and message below input */}
      <ColorInput
        mt="md"
        label="Your favorite color"
        placeholder="Enter color"
        error="You cannot pick white"
      />
    </>
  );
}

Get input ref

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

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

Go back

Chip – @asuikit/core

Up next

ColorPicker – @asuikit/core

ColorInput component props

Name	Type	Description
closeOnColorSwatchClick	boolean	Determines whether the dropdown should be closed when color swatch is clicked, false by default
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
eyeDropperIcon	ReactNode	Replaces default eye dropper icon
eyeDropperLabel	string	aria-label for eye dropper button
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	Width<string \| number>	Width of icon section
inputContainer	(children: ReactNode) => ReactNode	Input container component, defaults to React.Fragment
inputWrapperOrder	("input" \| "label" \| "error" \| "description")[]	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
placeholder	string
portalProps	Omit<PortalProps, "children" \| "withinPortal">	Props to pass down to the portal when withinPortal is true
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
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	Width<string \| 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
transitionProps	Partial<Omit<TransitionProps, "mounted">>	Props added to Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 0, transition: 'fade' } by default
value	string	Controlled component value
variant	Variants<"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
withEyeDropper	boolean	Determines whether eye dropper button should be displayed in the right section, true by default
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

Name	Static selector	Description
wrapper	.asuikit-ColorInput-wrapper	Root element
icon	.asuikit-ColorInput-icon	Input icon wrapper on the left side of the input, controlled by icon prop
input	.asuikit-ColorInput-input	Main input element
rightSection	.asuikit-ColorInput-rightSection	Input right section, controlled by rightSection prop
root	.asuikit-ColorInput-root	Root element
label	.asuikit-ColorInput-label	Label element styles, defined by label prop
error	.asuikit-ColorInput-error	Error element styles, defined by error prop
description	.asuikit-ColorInput-description	Description element styles, defined by description prop
required	.asuikit-ColorInput-required	Required asterisk element styles, defined by required prop
body	.asuikit-ColorInput-body	Includes hue and alpha sliders and color preview
preview	.asuikit-ColorInput-preview	Color preview
sliders	.asuikit-ColorInput-sliders	Hue and alpha sliders wrapper
slider	.asuikit-ColorInput-slider	Alpha and hue sliders
sliderOverlay	.asuikit-ColorInput-sliderOverlay	Hue and alpha sliders overlays
thumb	.asuikit-ColorInput-thumb	Hue, alpha and saturation sliders thumbs
saturation	.asuikit-ColorInput-saturation	Saturation slider
swatch	.asuikit-ColorInput-swatch	ColorSwatch component in swatches list
swatches	.asuikit-ColorInput-swatches	Wrapper around all swatches
dropdown	.asuikit-ColorInput-dropdown	Dropdown root element
arrow	.asuikit-ColorInput-arrow	Dropdown arrow