Toggle Group

fandhe-frontend-pre-styled-ui の toggle_group mod が提供するスタイル済み Toggle Group 部品です。複数トグルボタンのグループで、高々 1 項目が押下される single モード（ToggleGroup）と複数項目が同時に押下される multiple モード（MultiToggleGroup）の 2 状態機械を選べます。

Demo

複数の Toggle をまとめて排他/複数選択させるグループ部品。root にのみ role="group" を固定付与します（RadioGroup の role="radiogroup" とは異なります）。

Features

`size`/`colorPalette` variant クラスを `root` へ付与し、headless-ui の `toggle_group::root` へ委譲する。
`radio_group`/`radio_card`/`segment_group` と同型の `orientation`/`labelled_by` 軸を持つ。
各 item は単体 Toggle と同じ押下状態付きネイティブ button で `aria-pressed`/`data-state` 語彙を揃える。
`root` のみが `role="group"` を持つ（`role="radiogroup"` の RadioGroup とは異なる）。

Anatomy

root
  item

API Reference

Arguments

Name	Type	Default	Description
size	Size	Size::Md	サイズ variant。
palette	ColorPalette	ColorPalette::Accent	colorPalette 軸。
disabled	bool	false	グループ全体の無効化状態。
orientation	Option<Orientation>	None	`Some` のとき `root` へ `data-orientation` を出力する（`role="group"` に `aria-orientation` は WAI-ARIA 上許可されないため付与しない）。
labelled_by	Option<&str>	None	`Some` のとき `aria-labelledby` を付与する。
attrs	Vec<(&str, &str)>		root パーツへ合成する追加属性。
children	Vec<Node>		root 配下の子ノード（通常 `toggle_group::item` 列）。

Data Attributes

Part	Attribute	Observed Values
item	data-disabled
item	data-pressed
item	data-state	off, on
item	data-value	bottom, center, left, middle, right, top
root	data-disabled
root	data-orientation	vertical

CSS Variables

Variable	Default
--fandhe-toggle-group-item-font-size	var(--fandhe-font-font-size-sm)
--fandhe-toggle-group-item-padding-x	0.75rem
--fandhe-toggle-group-item-padding-y	0.375rem

Accessibility

Keyboard Interactions

Key	Description
Space / Enter	ネイティブ `<button>` のブラウザ既定動作により各 item の押下状態を切り替える（ブラウザ実装依存、本フレームワークの JS 出力によらない）。

WAI-ARIA

Attribute	Description
role="group"	`root` に固定付与する。
aria-labelledby	`labelled_by` が `Some` のときのみ `root` へ付与する。
aria-pressed	各 item に付与する。押下状態（true/false）を表す。