コンポーネント一覧
Checkbox
複数選べるなら Checkbox、1つだけなら Radio。形が違うので利用者は見た目で判別できる。
デモ
使い分け
こうする
- 複数選べるときに使う。1 つだけなら Radio
- 親子の一括選択は isIndeterminate で「一部」を表す
こうしない
- 「オン / オフ」の即時切替に Checkbox を使わない。保存ボタンを待たず効くなら Switch
- 選択肢が 10 を超える群を Checkbox で並べない。ComboBox か Table の選択にする
Props
| 名前 | 型 | 説明 |
|---|---|---|
| size | 'sm' | 'md' | 'lg' | |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | |
| label | ReactNode | |
| description | ReactNode | |
| errorMessage | ReactNode | |
| name | string | |
| value | string[] | |
| defaultValue | string[] | |
| onChange | (value: string[]) => void | |
| orientation | 'horizontal' | 'vertical' | |
| isDisabled | boolean | |
| isReadOnly | boolean | |
| isRequired | boolean | |
| isInvalid | boolean | |
| children | ReactNode | |
| classNames | ClassNames<typeof checkboxGroupSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- label
- list必須
- description
- errorMessage
アクセシビリティ
| キー | 動作 |
|---|---|
| Tab | 項目を順に移動 |
| Space | 切り替える |
- group として提示され、`label` がグループ名になる。エラーはグループに対して1つ出し、 `aria-describedby` で各入力から参照される
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。