UI Component Lab English

← コンポーネント一覧

アクション

Toggle button トグルボタン

押された状態と押されていない状態を保ち、機能がオンかどうかを示すボタン。

音声オン

見分けるポイント

普通のボタンと同じ形だが、押されている間は背景や枠線の色が変わる。太字やミュートのように、ツールバーのアイコンボタンとして使われることが多い。

挙動

  • 押すたびに、押された状態と押されていない状態が入れ替わる。
  • ラベルは変えず、押されているかどうかは見た目と aria-pressed で伝える。
  • 太字・斜体・下線のように、複数を並べてグループにすることもある。

キーボード操作

キー動作
Spaceボタンを押す・戻す。
Enterボタンを押す・戻す。
  • スイッチ: トグルボタンはボタンの形でツールバーなどに使い、スイッチはつまみが動く形で設定項目に使う。
  • ボタン: ボタンは押すたびに操作を1回実行し、トグルボタンはオン・オフの状態を保つ。
  • ツールバー: トグルボタンはオンとオフを切り替える1つのボタンで、ツールバーは複数のボタンをまとめて矢印キーで行き来させる。

出典