コンポーネント / forms

forms · @awesome-ds/react

Switch

設定を即時に切り替えるオン・オフ操作。

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

状態マトリクス

オフ必須
オン必須
無効必須

構造

  • スイッチ
  • トラックとつまみ
  • 常時表示ラベル

キーボード操作契約

Spaceで設定を即時に切り替えます。

スクリーンリーダー契約

設定名とオン・オフ状態をswitchとして通知します。

コンテンツ規則

  • 「オン」ではなく切り替える設定名を付けます。
  • 即時に反映される設定だけに使います。

公開API

プロパティ型必須説明
idstring必須ラベルや説明と関連付ける一意なID。
labelstring必須利用者と支援技術へ示す名前。
checkedboolean—外部から制御する選択状態。
onChange(checked: boolean) => void—値の変更を受け取るコールバック。
disabledboolean—操作を無効にします。

環境適応契約

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

検証ID

Switch/role-state

ライブ表示

ライブ表示

コピー可能な実装例

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

<Switch id="dark" label="Dark mode" />