UI Component Lab English

← コンポーネント一覧

入力

Switch スイッチ

1つの設定をオン・オフする部品。切り替えるとすぐに反映される。

別名

見分けるポイント

角の丸い横長のつまみ溝に、丸いつまみが乗った形。オンにするとつまみが端へ移り、溝の色が変わる。

挙動

  • スイッチ本体かラベルをクリックすると状態が反転する。
  • 状態はオンとオフの2つだけで、チェックボックスのような中間状態はない。
  • ラベルは設定の名前を表し、状態が変わってもラベルの文言は変えない。
  • このデモはネイティブのチェックボックスに role="switch" を付け、スイッチの見た目にしている。

キーボード操作

キー動作
Spaceオン・オフを切り替える。

使い分け・注意点

  • すぐに反映される設定にだけ使う。保存や送信が必要なら、チェックボックスを使う。
  • チェックボックス: スイッチは切り替えるとすぐに反映され、チェックボックスは送信ボタンで後から確定することが多い。
  • トグルボタン: スイッチはつまみが動く形で設定項目に使い、トグルボタンはボタンの形でツールバーなどに使う。

出典