コンポーネント一覧
Select
選択肢が 20 件を超えたら、文字で絞り込める ComboBox を使う。Select は全部を目で追える数まで。
デモ
使い分け
こうする
- 5〜20 個の選択肢に使う。全部見えて、文字は打たせない
- 在庫切れは消さず isDisabled で残す。無いことが分かる
こうしない
- 選択肢が 20 を超えたら使わない。ComboBox にする
- 2〜4 個の選択肢に使わない。Radio の方が押す回数が少ない
Props
| 名前 | 型 | 説明 |
|---|---|---|
| variant | 'solid' | 'outline' | 'soft' | 'ghost' | 'plain' | |
| size | 'sm' | 'md' | 'lg' | |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| label | ReactNode | |
| placeholder | string | |
| description | ReactNode | |
| errorMessage | ReactNode | |
| name | string | |
| selectedKey | string | null | |
| defaultSelectedKey | string | |
| onSelectionChange | (key: string | null) => void | |
| isOpen | boolean | 開閉状態。制御したい場合に使う |
| defaultOpen | boolean | |
| onOpenChange | (isOpen: boolean) => void | |
| isDisabled | boolean | |
| isRequired | boolean | |
| isInvalid | boolean | |
| children | ReactNode | |
| classNames | ClassNames<typeof selectSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- label
- trigger必須
- value必須
- icon
- popover必須
- listbox必須
- option必須
- description
- errorMessage
アクセシビリティ
| キー | 動作 |
|---|---|
| Enter / Space / ↓ | 開く |
| ↑ ↓ | 項目を移動 |
| Enter | 決定 |
| Escape | 閉じてトリガーへ戻る |
| 文字 | 頭文字の項目へ飛ぶ |
- 矢印キーで移動、Enter で決定、Escape で閉じてトリガーへフォーカスが戻る。 IME 変換中の Enter は抑制されるため、変換確定で誤決定しない
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。