ColorInput

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

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

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

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

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']}
    />
  );
}

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

import { IconPaint } from '@tabler/icons';
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={<IconPaint size={16} />}
        label="With icon"
        placeholder="With icon"
      />
    </>
  );
}

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

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

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

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

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

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