Form

Dropdown

Dark Mode

범용 드롭다운 컴포넌트입니다. type prop으로 단일 선택(select), 다중 선택(multi), 검색+선택(combobox), 액션 메뉴(menu) 4가지 모드를 지원합니다.

import { Dropdown } from "@/shared/ui/common/form"

인터랙티브 데모

Variant

Size

Options

tsx

<Dropdown
  label="기업 유형"
  variant="outline"
  inputSize="md"
  options={options}
  onChange={setValue}
/>

Variants

다양한 구성 예시

필수 항목입니다

크기 비교

sm · md · lg

Props

Dropdown

Prop	Type	Required	Default	설명
`type`	`"select" \| "multi" \| "combobox" \| "menu"`	—	"select"	드롭다운 타입. select=단일선택, multi=다중선택, combobox=검색+선택, menu=액션메뉴
`options`	`DropdownOption[]` interface DropdownOption { value: string; label: string; icon?: ComponentType; // menu용 danger?: boolean; // menu용 disabled?: boolean; // menu용 }	—	[]	옵션 목록 (select, multi, combobox)
`sections`	`DropdownSection[]`	—	—	섹션별 메뉴 목록 (menu 전용). 섹션 간 구분선 표시
`value`	`string`	—	—	선택된 값 (select, combobox)
`multiValue`	`string[]`	—	[]	선택된 값 배열 (multi)
`onChange`	`(value: string) => void`	—	—	단일 값 변경 콜백 (select, combobox, menu)
`onMultiChange`	`(value: string[]) => void`	—	—	다중 값 변경 콜백 (multi)
`trigger`	`ReactNode`	—	—	메뉴 트리거 요소 (menu 전용)
`align`	`"left" \| "right"`	—	"left"	메뉴 정렬 (menu 전용)
`placeholder`	`string`	—	"선택하세요"	미선택 시 표시 텍스트
`searchPlaceholder`	`string`	—	"검색..."	검색 플레이스홀더 (combobox 전용)
`emptyText`	`string`	—	"결과 없음"	빈 검색 결과 텍스트 (combobox 전용)
`inputSize`	`"sm" \| "md" \| "lg"`	—	"md"	크기
`variant`	`"outline"`	—	"outline"	스타일 변형
`leftIcon`	`ComponentType`	—	—	좌측 아이콘
`prefix`	`string`	—	—	좌측 접두사
`suffix`	`string`	—	—	우측 접미사
`label`	`string`	—	—	라벨
`error`	`boolean`	—	false	에러 상태
`helperText`	`string`	—	—	하단 도움말
`errorMessage`	`string`	—	—	하단 에러 메시지
`disabled`	`boolean`	—	false	비활성
`className`	`string`	—	—	추가 CSS 클래스