Installation
bash
npx axis-cli add selectUsage
tsx
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@axis-ds/ui-react'
export function Example() {
return (
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectContent>
</Select>
)
}Components
Select셀렉트 루트 컨테이너
SelectTrigger셀렉트를 여는 트리거 버튼
SelectValue선택된 값 표시
SelectContent드롭다운 콘텐츠 영역
SelectItem선택 가능한 아이템
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | 선택된 값 (controlled) |
onValueChange | (value: string) => void | - | 값 변경 콜백 |
defaultValue | string | - | 기본 선택값 |
disabled | boolean | false | 비활성화 상태 |
valueType:
stringDefault:
-선택된 값 (controlled)
onValueChangeType:
(value: string) => voidDefault:
-값 변경 콜백
defaultValueType:
stringDefault:
-기본 선택값
disabledType:
booleanDefault:
false비활성화 상태
Accessibility
Radix UI Select 기반으로 WAI-ARIA Listbox 선택 패턴을 따릅니다.
| Key | Action |
|---|---|
| Enter / Space | 목록을 열고 포커스된 옵션을 선택합니다. |
| ↑ ↓ | 옵션 사이를 이동합니다. |
| Home / End | 첫/마지막 옵션으로 이동합니다. |
| Esc | 목록을 닫습니다. |
- 선택된 옵션에 aria-selected가 적용됩니다.
- 글자 입력 시 해당 옵션으로 type-ahead 이동합니다.