Select · Overview

스토리북 개발자들을 위한 내부 문서

Components

Select

Overview

Select는 Radix Select 기반 합성 컴포넌트입니다. Trigger · Value · Content · Item을 조합해 트리거와 옵션 리스트를 모두 커스텀합니다. native <select> 드롭다운이 아니라 SelectContent · SelectItem으로 옵션 UI를 그립니다. Select의 위치를 감지하여 드롭다운 위치를 자동으로 조정합니다.

Basic

Trigger · Value · Content · Group · Item 조합. items를 map해 SelectItem을 렌더합니다.

Groups

SelectGroup · SelectLabel · SelectSeparator로 옵션을 구분합니다.

Icon

SelectTrigger의 icon으로 우측 아이콘을 교체하거나 null로 숨깁니다. 기본은 chevron입니다.

  • Defaulticon 생략 — 기본 chevron
  • Customicon={<CustomIcon />}
  • Noneicon={null} — 아이콘 숨김

Default

Custom

None

Disabled

Root disabled로 전체를, SelectItem disabled로 개별 옵션을 비활성화합니다.

Root disabled

Item disabled

Responsive

Trigger에 w-full / max-w-* 등 className을 주면 Content 너비도 Trigger에 맞춰집니다.