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" とは異なります）。variant（Outline/Ghost）はイシュー #2024 の shadcn/ui 突合で新設しました。最下段は複数押下可能な MultiToggleGroup 相当（bold/italic が同時押下）の見た目です。

Features

size/variant/colorPalette variant クラスを root へ付与し、headless-ui の toggle_group::root へ委譲する。
variant（ToggleGroupVariant::Outline/Ghost）はイシュー #2024 の shadcn/ui 突合で新設した軸。Outline（既定）は輪郭あり、Ghost は背景・輪郭なしの最小装飾（crate::toggle::ToggleVariant と同じ意味論。custom property 経由で item パーツへ伝播する）。
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。
`variant`	`ToggleGroupVariant`	`ToggleGroupVariant::Outline`	外観 variant（Outline/Ghost、イシュー #2024）。
`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-orientation`	`vertical`
`item`	`data-pressed`	（値なし）
`item`	`data-state`	`off`, `on`
`item`	`data-value`	`bold`, `bottom`, `center`, `italic`, `left`, `middle`, `right`, `top`, `underline`
`root`	`data-disabled`	（値なし）
`root`	`data-orientation`	`vertical`

CSS Variables

Variable	Default
`--fandhe-toggle-group-item-background`	`var(--fandhe-color-bg)`
`--fandhe-toggle-group-item-border-color`	`var(--fandhe-color-border)`
`--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）を表す。