ColorInput

ColorInput (색상 입력)

ColorInput 컴포넌트는 사용자로부터 색상을 입력받는 컴포넌트예요. Input과 Input.Wrapper 컴포넌트의 기능과 모든 input 요소 props를 지원해요.

출처: 문서

본문

ColorInput 컴포넌트는 Input과 Input.Wrapper 컴포넌트의 기능과 모든 input 요소 props를 지원해요. ColorInput 문서는 컴포넌트가 지원하는 모든 기능을 담고 있지 않아요. 사용 가능한 모든 기능은 Input 문서를 참고해요.

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

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

로딩 상태 (Loading state)

loading prop을 설정하면 로딩 인디케이터를 표시해요. 기본적으로 로더는 input 오른쪽에 표시돼요. loadingPosition prop을 'left'나 'right'로 바꿔 위치를 조절할 수 있어요.

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

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

제어 사용 (Controlled)

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

function Demo() {
  const [value, setValue] = useState('');
  return <ColorInput value={value} onChange={setValue} />;
}

포맷 (Formats)

컴포넌트는 hex, hexa, rgb, rgba, hsl, hsla 색상 포맷을 지원해요. 불투명도(opacity)를 바꾸는 슬라이더는 hexa, rgba, hsla 포맷에서만 표시돼요.

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

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

유효하지 않은 입력 유지 (Preserve invalid input)

기본적으로 ColorInput은 blur 시 값을 마지막으로 알려진 유효한 값으로 되돌려요. 이 동작을 바꾸고 유효하지 않은 값을 유지하려면 fixOnBlur={false}를 설정해요.

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

function Demo() {
  return <ColorInput fixOnBlur={false} label="Value is not fixed on blur" placeholder="May contain invalid value" />;
}

onChangeEnd

onChangeEnd는 사용자가 슬라이더 드래그를 멈추거나 input 값을 변경할 때 호출돼요. 사용자가 컴포넌트와 상호작용을 마쳤을 때만 색상을 업데이트해야 하는 경우 유용해요.

import { useState } from 'react';
import { ColorInput, Text } from '@mantine/core';

function Demo() {
  const [changeEndValue, setChangeEndValue] = useState('#FFFFFF');

  return (
    <>
      <Text mb="md">
        Change end value: <b>{changeEndValue}</b>
      </Text>

      <ColorInput
        label="Pick color"
        placeholder="Pick color"
        defaultValue="#FFFFFF"
        onChangeEnd={setChangeEndValue}
      />
    </>
  );
}

자유 입력 비활성화 (Disable free input)

disallowInput prop으로 자유 입력을 비활성화할 수 있어요.

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

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

스와치 (With swatches)

swatches prop으로 원하는 만큼 사전 정의된 색상 스와치를 추가할 수 있어요.

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

function Demo() {
  return (
    <ColorInput
      format="hex"
      swatches={['#2e2e2e', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
    />
  );
}

기본적으로 한 행에 7개의 스와치가 표시돼요. ColorPicker 컴포넌트처럼 swatchesPerRow prop으로 바꿀 수 있어요.

특정 색상으로만 선택을 제한해야 한다면 색상 선택기(color picker)를 비활성화하고 자유 입력을 차단하며 스포이트(eye dropper)를 숨겨요.

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

function Demo() {
  return (
    <ColorInput
      placeholder="Pick color"
      label="Your favorite color"
      disallowInput
      withPicker={false}
      withEyeDropper={false}
      swatches={['#2e2e2e', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
    />
  );
}

색상 스와치 클릭 시 드롭다운 닫기

closeOnColorSwatchClick prop을 설정하면 색상 스와치 중 하나가 클릭될 때 드롭다운이 닫혀요.

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

function Demo() {
  return (
    <ColorInput
      closeOnColorSwatchClick
      label="Dropdown is closed when color swatch is clicked"
      placeholder="Click color swatch"
      swatches={['#2e2e2e', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2', '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
    />
  );
}

드롭다운 숨기기

withPicker={false}로 드롭다운을 숨길 수 있어요.

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

function Demo() {
  return (
    <ColorInput withPicker={false} pointer label="Without dropdown" placeholder="Enter value" />
  );
}

스포이트 (Eye dropper)

기본적으로 EyeDropper API가 사용 가능하면 input 오른쪽 섹션에 스포이트 아이콘이 표시돼요. 비활성화하려면 withEyeDropper={false}를 설정해요.

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

function Demo() {
  return <ColorInput withEyeDropper={false} label="Without eye dropper" placeholder="Not fun" />;
}

스포이트 아이콘 바꾸기

eyeDropperIcon prop으로 스포이트 아이콘을 어떤 React 노드로든 바꿀 수 있어요.

import { ColorInput } from '@mantine/core';
import { CrosshairIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <ColorInput
      eyeDropperIcon={<CrosshairIcon size={18} />}
      label="With custom eye dropper icon"
      placeholder="Pick color"
    />
  );
}

왼쪽·오른쪽 섹션 (Left and right sections)

ColorInput은 leftSection과 rightSection prop을 지원해요. 이 섹션들은 input wrapper 안에 절대 위치(absolute positioning)로 렌더링돼요. 아이콘이나 다른 요소를 표시하는 데 사용할 수 있어요.

섹션 스타일과 콘텐츠를 제어하는 props:

  • rightSection / leftSection – input의 해당 쪽에 렌더링할 React 노드
  • rightSectionWidth/leftSectionWidth – right section의 너비와 input 해당 쪽의 패딩을 제어해요. 기본적으로 컴포넌트 size prop으로 제어돼요.
  • rightSectionPointerEvents/leftSectionPointerEvents – 섹션의 pointer-events 속성을 제어해요. 상호작용하지 않는 요소를 렌더링하려면 none으로 설정해 클릭이 input을 통과하게 해요.

기본적으로 ColorInput은 왼쪽 섹션에 색상 미리보기(color preview)가 있고 오른쪽 섹션에 스포이트 버튼이 있어요. leftSection과 rightSection prop으로 이 요소들을 어떤 React 노드로든 바꿀 수 있어요.

import { ColorInput } from '@mantine/core';
import { EyedropperIcon } from '@phosphor-icons/react';

function Demo() {
  const icon = <EyedropperIcon size={18} />;

  return (
    <>
      <ColorInput
        label="With custom left section"
        placeholder="Replaces color swatch"
        leftSection={icon}
        leftSectionPointerEvents="none"
        withEyeDropper={false}
      />
      <ColorInput
        label="With custom right section"
        placeholder="Replaces eye dropper"
        rightSection={icon}
        rightSectionPointerEvents="none"
        mt="md"
      />
    </>
  );
}

오류 상태 (Error state)

error prop으로 오류 메시지를 표시할 수 있어요.

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

성공 상태 (Success state)

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

function Demo() {
  return <ColorInput label="Color" placeholder="Color" success="Color accepted" />;
}

비활성 상태 (Disabled state)

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

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

읽기 전용 (Read only)

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

function Demo() {
  return <ColorInput readOnly label="Cannot modify value" defaultValue="#F0FCFE" />;
}

Styles API

ColorInput은 Styles API를 지원해요. classNames prop으로 내부 요소에 스타일을 추가할 수 있어요.

주요 선택자는 다음과 같아요.

  • wrapper – 루트 요소
  • input – input 요소
  • section – 왼쪽·오른쪽 섹션
  • bottomSection – input border 아래쪽에 렌더링되는 하단 섹션 요소
  • root – 루트 요소
  • label – 라벨 요소
  • required – 라벨 안에 렌더링되는 필수 별표 요소
  • description – 설명 요소
  • error – 오류 요소
  • success – 성공 요소
  • preview – format이 alpha 채널을 지원할 때만 표시되는 색상 미리보기
  • body – alpha/hue 슬라이더와 색상 미리보기 포함
  • slider – alpha·hue 슬라이더 루트
  • sliderOverlay – hue·alpha 슬라이더 위에 다양한 오버레이를 표시하는 요소
  • saturation – 채도 선택기
  • saturationOverlay – 채도 선택기 위에 다양한 오버레이를 표시하는 요소
  • sliders – alpha·hue 슬라이더 포함
  • thumb – 모든 슬라이더의 썸
  • swatch – 색상 스와치
  • swatches – 색상 스와치 목록
  • dropdown – 팝오버 드롭다운
  • colorPreview – input 왼쪽 섹션의 색상 견본 미리보기
  • eyeDropperButton – 스포이트 버튼
  • eyeDropperIcon – 기본 스포이트 아이콘

요소 ref 가져오기

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

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

접근성 (Accessibility)

ColorInput을 label prop 없이 사용하면 스크린 리더가 제대로 인지하지 못해요.

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

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

aria-label을 설정하면 input을 접근 가능하게 만들 수 있어요.

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

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

label prop이 설정되면 input은 접근 가능하며 aria-label을 설정할 필요가 없어요.

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

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

더 알아보기 (Learn more)