Skip to Content
ComponentsIcignalSelect

Select

드롭다운에서 옵션을 선택하는 폼 컴포넌트

개요

Select는 드롭다운 목록에서 항목을 선택하는 폼 컴포넌트입니다. 단일 선택과 다중 선택(칩 기반)을 모두 지원하며, 그룹화된 옵션 구조를 제공합니다.

주요 특징

  • ✅ 단일/다중 선택: multiple prop으로 전환
  • ✅ 그룹화 옵션: group으로 항목 분류
  • ✅ 클리어 버튼: 선택 초기화
  • ✅ 다양한 크기: xs, sm, md, lg, xl
  • ✅ FormItem 통합: 레이블, 설명, 에러 메시지
  • ✅ 접근성: WAI-ARIA Select 패턴
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

Variants

선택 모드

그룹화 옵션

Variant 설명

Variant설명사용 사례
single하나의 옵션만 선택차트 타입, 기간 선택
multiple여러 옵션 동시 선택 (칩)채널 필터, 태그 선택
grouped그룹별로 옵션 분류카테고리별 메트릭

Sizes

States

매출

사용 예시

예시 1: 분석 필터

지표와 기간을 선택합니다.

예시 2: 다중 채널 선택

리포트에 포함할 트래픽 채널을 선택합니다.

유료 광고

분석할 채널을 선택하세요

API Reference

Props

PropTypeDefaultDescription
multiplebooleanfalse다중 선택 모드
itemsSelectItemProps[][]옵션 항목 배열
valuestring | string[]-선택된 값 (제어)
defaultValuestring | string[]-기본 선택 값
onValueChange(value: string | string[]) => void-값 변경 핸들러
placeholderstring-플레이스홀더
widthstring | number"100%"컴포넌트 너비
size"xs" | "sm" | "md" | "lg" | "xl"-컴포넌트 크기
disabledbooleanfalse비활성화 여부
readOnlybooleanfalse읽기 전용 여부
clearablebooleantrue클리어 가능 여부
labelstring-필드 레이블
labelWidthstring | number-레이블 너비
requiredbooleanfalse필수 여부
orientation"horizontal" | "vertical""horizontal"레이블-필드 배치 방향
descriptionstring-설명 텍스트
errorstring-에러 메시지
classNamestring-추가 CSS 클래스

SelectItemProps

PropTypeDefaultDescription
valuestring-옵션 값 (필수)
labelstring | ReactNode-옵션 레이블
groupstring-그룹 키
disabledbooleanfalse비활성화 여부

기본 사용법

import { Select } from "@vortex/ui-icignal"
 
// 단일 선택
<Select
  label="기간"
  items={[
    { value: "7d", label: "7일" },
    { value: "30d", label: "30일" },
  ]}
/>
 
// 다중 선택
<Select
  multiple
  label="채널"
  items={[...]}
  defaultValue={["organic"]}
/>

접근성

ARIA 속성

<Select
  label="지표 선택"
  items={[
    { value: "revenue", label: "매출" },
    { value: "users", label: "사용자" },
  ]}
/>

권장 사항

관련 컴포넌트

Last updated on
RadioButtonGroupSwitch