コンポーネント / forms

forms · @awesome-ds/react

Checkbox

複数選択に使う二値の選択肢。

関連ルール: rule.a11y.wcag-aa

状態マトリクス

未選択必須
選択済み必須
無効必須

構造

  • チェックボックス
  • 表示ラベル
  • 任意の説明

キーボード操作契約

Spaceで選択を切り替え、Tabで次へ移動します。

スクリーンリーダー契約

選択肢名、選択状態、無効状態をチェックボックスとして通知します。

コンテンツ規則

  • 選択できる内容を文として書きます。
  • 関連する複数項目にはグループのlegendを付けます。

公開API

プロパティ型必須説明
idstring必須ラベルや説明と関連付ける一意なID。
labelstring必須利用者と支援技術へ示す名前。
…nativeOmit<InputHTMLAttributes<HTMLInputElement>, "type">—対応するネイティブ要素の標準属性。

環境適応契約

RTL
論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
ハイコントラスト
背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
動きを減らす設定
状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。

検証ID

Checkbox/native-toggle

ライブ表示

ライブ表示

コピー可能な実装例

import { Checkbox } from "@awesome-ds/react";

<Checkbox id="tos" label="Accept terms" />