Skip to Content
ComponentsIcignalColorPicker

ColorPicker

색상을 선택하고 다양한 포맷으로 출력하는 컴포넌트 (레이블 지원)

개요

iCignal ColorPicker는 Foundation ColorPicker를 확장하여 FormItem 래핑을 통해 레이블, 필수 표시, 설명, 에러 메시지를 제공합니다.

주요 특징

  • ✅ 레이블 제공: label, labelWidth, orientation으로 레이블 배치
  • ✅ 필수 표시: required로 필수 입력 표시
  • ✅ 에러 메시지: error로 유효성 검증 메시지 표시
  • ✅ 설명 텍스트: description으로 필드 설명 추가
  • ✅ 색상 선택: 팔레트에서 마우스로 색상 선택
  • ✅ 색상 코드 입력: HEX, RGB, CSS, HSL, OKLCH 코드 직접 입력 (팝오버 내 인풋 필드에서 직접 편집 가능)
  • ✅ 트리거 값 표시: 선택된 색상이 outputFormat 기반으로 트리거에 표시 (투명도 포함 시 자동 반영)
  • ✅ 투명도 조절: Alpha 채널 조절 지원
  • ✅ EyeDropper: 화면에서 색상 추출

사용 예시

레이블 제공

#3B82F6
#8B5CF6

에러 및 설명

페이지 배경 색상을 선택하세요.

#F8FAFC
#000000

트리거에 값 표시

색상이 선택되면 트리거에 outputFormat 기반으로 포맷된 색상 값이 표시됩니다. 투명도가 100%가 아닌 경우 alpha 값도 포맷에 포함됩니다.

#3B82F6
rgb(239, 68, 68)
hsl(142 71% 45%)
oklch(60.6% 0.219 292.7)
rgb(245, 158, 11)

투명도 조절

#EF4444
#22C55E

API Reference

Props

Foundation ColorPicker의 모든 Props를 상속하며, FormItem Props가 추가됩니다.

PropTypeDefaultDescription
labelstring-필드 레이블
labelWidthstring | number-레이블 너비
labelAlign"start" | "center" | "end"-레이블 가로 정렬
labelVerticalAlign"start" | "center" | "end"-레이블 세로 정렬
requiredbooleanfalse필수 여부 (* 표시)
orientation"horizontal" | "vertical""horizontal"레이블-필드 배치 방향
descriptionstring-설명 텍스트
errorstring-에러 메시지
valuestring-색상 값 (제어 컴포넌트)
defaultValuestring-초기 기본 색상
outputFormat"hex" | "rgb" | "hsl" | "oklch" | "css""hex"출력 색상 포맷
placeholderstring-플레이스홀더 텍스트
showAlphabooleantrue투명도 조절 표시 여부
showEyeDropperbooleantrueEyeDropper 버튼 표시 여부
showOutputbooleantrue색상 코드 입력 필드 표시
showFormatbooleantrue포맷 선택 버튼 표시 여부

Events

EventTypeDescription
onChange(value: string) => void색상 변경 시 호출
onOpenChange(open: boolean) => voidPopover 열림/닫힘 시

기본 사용법

import { ColorPicker } from "@vortex/ui-icignal"
 
<ColorPicker label="테마 색상" labelWidth={120} defaultValue="#3b82f6" />
<ColorPicker
  label="배경색"
  labelWidth={120}
  required
  description="페이지 배경 색상"
  defaultValue="#f8fafc"
/>

접근성

권장 사항

  • ✅ label을 통해 입력 목적 전달
  • ✅ 키보드: Tab으로 컨트롤 이동, Enter로 Popover 열기/닫기
  • ✅ 색상 코드 직접 입력: 인풋 클릭 후 값 편집, Enter로 확정, Escape로 취소
  • ❌ 색상만으로 정보를 전달하지 않도록 주의

관련 컴포넌트

Last updated on
CheckboxGroupCombobox