ToggleGroup

複数の Toggle をグループにまとめたコンポーネント。「1つだけ選ぶ（single）」か「複数選べる（multiple）」かを切り替えて使える。ビュー切り替えや整形ツールバーに使う。

インストール

npx shoji add toggle-group

プレビュー

使用例

使い方

こんなときに使う

  • グリッド/リスト/カードなどビューモードの切り替え（type="single"）
  • テキスト整形ツールバー（太字+イタリック+下線を複数同時ON）（type="multiple"）
  • フィルターの複数選択（type="multiple"）

使わないほうがいい場面

  • 選択肢が6個以上（視認性が低下する。代わりに Tabs や Select を検討）

JP 最適化のポイント

  • 日本語ラベルは短く — 1〜3文字（「グリッド」「リスト」など）が理想。長いと横並びで詰まって見える
  • role="group" に aria-label を付与してグループの意味を伝える