Select
긴 선택 목록을 키보드와 포인터로 탐색합니다.
- 성숙도
- 후보
- 소스 경로
components/ui/select.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/reactradix-ui
실제 미리보기
사용할 때
사용 기준
native select보다 정교한 항목 상태와 팝업 배치가 필요할 때 씁니다.
사용하지 않을 때
선택지가 짧거나 모바일 native 선택 경험이 더 적합하면 Native Select를 씁니다.
변형과 상태
default고정 예시현재 값과 목록 열기 단서가 함께 보이는지 확인합니다.
open직접 조작목록 너비와 화면 충돌 처리가 자연스러운지 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
disabled고정 예시비활성 항목을 건너뛰면서도 읽을 수 있는지 확인합니다.
접근성
레이블을 연결하고 방향키 선택, 비활성 항목, Escape 닫기와 초점 복귀를 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
value | string | 아니요 | 제어되는 현재 값입니다. |
defaultValue | string | 아니요 | 비제어 초기 값입니다. |
onValueChange | (value: string) => void | 아니요 | 선택이 바뀔 때 호출됩니다. |
사용 예시
지원 importimport {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem,
} from "@/components/ui/select"
<Select defaultValue="ko">
<SelectTrigger aria-label="Language"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="ko">한국어</SelectItem>
</SelectContent>
</Select>