Toggle

押した状態と離した状態を持つ2状態ボタン。テキストの太字・イタリック・下線など整形ツールバー、またはフィルターのオン/オフに使う。

インストール

npx shoji add toggle

プレビュー

Variants

Default
Outline

States

使い方

こんなときに使う

  • テキストエディタのツールバー（太字・イタリック・下線など）
  • フィルターのオン/オフ（「カテゴリA」をONにしてフィルタリング）
  • ビューの切り替え（グリッド表示・リスト表示など）

使わないほうがいい場面

  • グループ内で1つだけ選ぶ用途（ToggleGroup の type="single" を使う）
  • アクションを実行するだけのボタン（Button を使う）

JP 最適化のポイント

  • aria-pressed="true/false" を必ず付与 — スクリーンリーダーが押下状態を読み上げられる