Radio Group

fandhe-frontend-headless-ui の radio_group mod が提供する「高々 1 項目が選択される」ラジオグループの unstyled 部品です。Root / Label / Item / ItemControl / ItemText / ItemHiddenInput の 6 anatomy パーツを持ち、意味論・キーボード操作・排他選択はネイティブ <input type="radio">（ItemHiddenInput）に委ねる構造です。

/themes/ 側の RadioGroup（Chakra ライクな variant/size を持つスタイル層）と異なり、CSS を一切持ちません。

スタイル済みの表示例は Radio Group を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

PlanMonthlyYearly

Features

Root / Label / Item / ItemControl / ItemText / ItemHiddenInput の 6 anatomy パーツと、「高々 1 項目が選択される」状態機械（`crate::state::SingleSelect` 埋め込み）を提供する。
`item_hidden_input` が生成するネイティブ `<input type="radio">` がチェック状態・フォーム送信・グループ内排他選択を担うため、`item_control` には `role="radio"`/`aria-checked` を重複付与しない（二重読み上げ防止）。
`item` は `<label>` 要素であり、内包する `item_hidden_input` へのクリック委譲が JS なしで機能する。
`data-state` 値語彙（`"checked"`/`"unchecked"`）は Checkbox / Switch と共有する共通機械由来であり、本モジュール独自の値を作らない。

Anatomy

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

API Reference

Arguments

Name	Type	Description
root(disabled)	bool	`data-disabled` を反映する。
root(orientation)	Option<Orientation>	`Some` のときのみ `data-orientation`/`aria-orientation` を付与する。
root(labelled_by)	Option<&str>	`Some` のときのみ `aria-labelledby` を付与する（`label(id)` と対で使う）。
label(id)	Option<&str>	`root(labelled_by)` の参照先 id。
item/item_control/item_text/item_hidden_input(checked)	bool	`data-state` の checked/unchecked を決める。
item/item_control/item_text/item_hidden_input(disabled)	bool	`data-disabled` を反映する。
item(value)	&str	選択肢の値。`data-value` として動的値のまま出力する（クリック → dispatch payload の源）。
item_hidden_input(name)	Option<&str>	`Some` のとき `name` 属性を出力する（グループ内排他選択の同一 name グループ）。
item_hidden_input(value)	&str	ネイティブ `value` 属性。

Data Attributes

Part	Attribute	Observed Values
item	data-state	checked, unchecked
item	data-value	monthly, yearly
item-control	data-state	checked, unchecked
item-hidden-input	data-state	checked, unchecked
item-text	data-state	checked, unchecked

Examples

Vertical, with disabled item

`orientation: Some(Orientation::Vertical)` + 2 番目の項目を `disabled` にした例。

DeliveryStandardSame day (unavailable)

Accessibility

Keyboard Interactions

Key	Description
ArrowUp / ArrowDown / ArrowLeft / ArrowRight	`item_hidden_input` はネイティブ `<input type="radio">` であり、同一 `name` グループ内の矢印キー移動・選択はブラウザ標準操作として成立する（JS 配線不要）。

WAI-ARIA

Attribute	Description
role="radiogroup" (root)	固定付与。
role="radio" / aria-checked	`item_control` へは明示付与しない。意味論は `item_hidden_input` のネイティブ `<input type="radio">` が担う（二重読み上げ防止）。