Select
목록에서 하나 또는 여러 개를 골라요. 항목이 5개 이상이거나 화면이 좁을 때 써요.
변형
대표 variant만 보여 줘요. 전체 조합은 Figma 원본 컴포넌트에서 확인해요. hover, focus는 컴포넌트가 처리해요.
default
open
invalid
disabled
Free
Pro
Team
Enterprise
Pro
defaultPro
disabledPro
highlightedPro
selectedPro
selected · highlightedPro
multiplePro
multiple · highlightedPro
multiple · selectedPro
multiple · selected · highlighted사용법
- 단일과 다중단일은 고르면 닫히고 오른쪽에 check, 다중은 열린 채로 왼쪽 체크박스예요.
- 떠 있는 요소 공통 스타일bg/surface + 1px border/default + radius/lg, 그림자 없음. 트리거 아래 4px.
Props
| prop | 값 | 기본값 |
|---|---|---|
| options | { value, label, disabled? }[] | — |
| multiple | 켜면 value·onValueChange가 배열 (타입으로 강제) | false |
| placeholder · invalid · disabled | Field 안에서는 라벨과 invalid가 자동 연결 | — |
코드
tsx
<Select options={plans} value={plan} onValueChange={setPlan} placeholder="요금제 선택" />
<Select multiple options={tags} value={selected} onValueChange={setSelected} placeholder="태그 선택" />