Native Select
브라우저 기본 선택 동작을 유지하는 select입니다.
- 성숙도
- 후보
- 소스 경로
components/ui/native-select.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/react
실제 미리보기
사용할 때
사용 기준
짧고 고정된 선택지를 하나 고를 때 씁니다.
사용하지 않을 때
검색이 필요한 긴 목록이나 여러 값을 고르는 UI에는 쓰지 않습니다.
변형과 상태
default고정 예시현재 선택값과 장식 화살표를 확인합니다.
focus-visible직접 조작키보드로 선택 목록을 열고 초점선을 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
disabled고정 예시선택이 막히고 값은 읽을 수 있는지 확인합니다.
접근성
native select만 상호작용 요소로 두고 장식 화살표는 숨깁니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
name | string | 아니요 | 폼 제출에 쓰는 이름입니다. |
children | ReactNode | 아니요 | native option과 optgroup입니다. |
사용 예시
지원 importimport { NativeSelect } from "@/components/ui/native-select"
<NativeSelect name="category">
<option value="general">General</option>
</NativeSelect>