Select
core드롭다운 선택 컴포넌트. 5-part anatomy: Root, Label, Trigger, Popover, Item.
컴포넌트 의존 관계
깊이
100%
기본 사용
여러 Select
다중 선택
선택됨: react, svelte
테스트 커버리지
2026년 2월 4일1/1 통과
1성공
0실패
1전체
- 트리거를 렌더링한다
SelectRoot Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
value | string | string[] | — | 제어 모드: 현재 선택 값 (multiple이면 string[]) |
onValueChange | (value: string | string[]) => void | — | 제어 모드: 값 변경 핸들러 |
defaultValue | string | string[] | — | 비제어 모드: 초기값 |
multiple | boolean | — | 다중 선택 허용 (값이 string[]이 됨) |
name | string | — | 폼 필드명. 선택값마다 hidden input을 렌더해 폼 전송 지원 |
SelectLabel Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 레이블 텍스트 |
SelectTrigger Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 트리거 내용 (선택된 값 표시) |
className | string | — | 기본 스타일 오버라이드 |
SelectPopover Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | SelectItem 목록 |
sameWidth | boolean | true | 트리거와 같은 너비 |
gutter | number | 4 | 트리거와의 간격 (px) |
className | string | — | 기본 스타일 오버라이드 |
SelectItem Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
value* | string | — | 옵션 값 |
children* | ReactNode | — | 옵션 레이블 |
className | string | — | 기본 스타일 오버라이드 |
Import
tsx
import {
SelectRoot,
SelectLabel,
SelectTrigger,
SelectPopover,
SelectItem,
} from "@reopt-ai/opt-ui";키보드 동작
| 키 | 동작 |
|---|---|
| ↑ ↓ | 옵션 탐색 |
| Enter / Space | 옵션 선택 |
| Esc | 팝오버 닫기 |
| 문자 입력 | Typeahead 탐색 |