기본

옵션 목록에서 하나를 고르는 드롭다운이다. 일반·검색·스크롤을 별도 컴포넌트가 아니라 같은 컴포넌트의 옵션으로 처리한다. 선택은 또렷이 강조하고, 옵션이 8개를 넘으면 자동으로 스크롤한다.

활용 방법

일반

searchable=false. 옵션이 적을 때(8개 이하)는 스크롤 없이 펼친다.

Preview

tsx

<SearchableDropdown
  options={options}
  value={value}
  onChange={setValue}
  searchable={false}
  groupLabel="상태"
/>

검색형

searchable 로 검색창을 띄운다. 옵션이 많을 때 빠르게 찾는다.

Preview

tsx

<SearchableDropdown
  options={options}
  value={value}
  onChange={setValue}
  searchable
  placeholder="검색"
/>

스크롤

옵션이 8개를 넘으면 자동으로 스크롤(expand 로 강제 펼침 가능). 섹션 라벨도 옵션과 함께 스크롤된다.

Preview

tsx

<SearchableDropdown
  options={longOptions} // 9개 이상
  value={value}
  onChange={setValue}
  searchable
  groupLabel="항목"
/>

그룹

옵션에 group 을 주면 그룹별 섹션 헤더로 나뉜다(헤더도 함께 스크롤).

Preview

tsx

const options = [
  { value: "a", label: "정보", group: "활성" },
  { value: "b", label: "주의", group: "활성" },
  { value: "c", label: "성공", group: "보관" },
];

<SearchableDropdown options={options} value={value} onChange={setValue} searchable />

라벨 없음

groupLabel 을 주지 않고 group 도 없으면 섹션 헤더 없이 옵션만 깔끔하게.

Preview

tsx

<SearchableDropdown
  options={options}
  value={value}
  onChange={setValue}
  searchable
/>

아이콘 없음

옵션에 icon 을 주지 않으면 배지 없이 텍스트만 렌더된다.

Preview

tsx

const options = [
  { value: "interstellar", label: "인터스텔라" },
  { value: "inception", label: "인셉션" },
  { value: "parasite", label: "기생충" },
];

<SearchableDropdown options={options} value={value} onChange={setValue} searchable />

속성

이름	타입	기본값	설명
options	DropdownOption[]	-	옵션 목록 ({ value, label, icon?, tone?, group? }). group 주면 그룹 섹션. 필수
value	string	-	선택값
onChange	(v: string) => void	-	선택 변경 콜백. 필수
searchable	boolean	true	검색창 표시 (false = 일반형)
expand	boolean	-	스크롤 없이 전부 펼침. 미지정 시 옵션 ≤8 자동 펼침
groupLabel	string	-	패널 상단 섹션 라벨
placeholder	string	"선택 또는 검색"	플레이스홀더/검색 힌트
disabled	boolean	false	비활성
className	string	-	래퍼 클래스 (주로 폭)