Radio Group

fandhe-frontend-pre-styled-ui の radio_group mod が提供するスタイル済み Radio Group 部品です。

Demo

単一選択の選択肢グループ。ネイティブ input[type="radio"] による排他選択・キーボード操作を data-scope="radio-group" の anatomy へ重ねます。

PlanFreeProEnterprise

`size`/`colorPalette` variant クラスを `root` へ付与し、headless-ui の `radio_group::root` へ委譲する。
`aria-checked` は各アイテムへ重複付与しない（二重読み上げ防止）。グループ全体の関連付けは `root` の `aria-labelledby` で行う。

root
  label
  item
    item-hidden-input
    item-control
    item-text

Name	Type	Default	Description
size	Size	Size::Md	サイズ variant。
palette	ColorPalette	ColorPalette::Accent	colorPalette 軸。
disabled	bool	false	グループ全体の無効化状態。
orientation	Option<Orientation>	None	キーボード操作方向のヒント（`aria-orientation`）。
labelled_by	Option<&str>	None	`Some` のとき `aria-labelledby` を付与する。
attrs	Vec<(&str, &str)>		root パーツへ合成する追加属性。
children	Vec<Node>		root 配下の子ノード。

Part	Attribute	Observed Values
item	data-disabled
item	data-state	checked, unchecked
item	data-value	plan-enterprise, plan-free, plan-pro
item-control	data-disabled
item-control	data-state	checked, unchecked
item-hidden-input	data-state	checked, unchecked
item-text	data-disabled
item-text	data-state	checked, unchecked
root	data-orientation	vertical

Variable	Default
--fandhe-radio-group-control-size	1rem
--fandhe-radio-group-dot-inset	3px
--fandhe-radio-group-font-size	var(--fandhe-font-font-size-sm)

Attribute	Description
aria-labelledby	`labelled_by` が `Some` のときのみ `root` へ付与する。
aria-orientation	`orientation` が `Some` のとき `root` へ `data-orientation` と対で付与する。