Radio Group

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

Demo

Features

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

Anatomy

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

API Reference

Arguments

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 配下の子ノード。

Data Attributes

Part	Attribute	Observed Values
`item`	`data-disabled`	（値なし）
`item`	`data-invalid`	（値なし）
`item`	`data-state`	`checked`, `unchecked`
`item`	`data-value`	`plan-enterprise`, `plan-free`, `plan-pro`
`item-control`	`data-disabled`	（値なし）
`item-control`	`data-invalid`	（値なし）
`item-control`	`data-state`	`checked`, `unchecked`
`item-hidden-input`	`data-state`	`checked`, `unchecked`
`item-text`	`data-disabled`	（値なし）
`item-text`	`data-invalid`	（値なし）
`item-text`	`data-state`	`checked`, `unchecked`
`label`	`data-invalid`	（値なし）
`root`	`data-invalid`	（値なし）
`root`	`data-orientation`	`horizontal`, `vertical`

CSS Variables

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)`
`--fandhe-radio-group-gap`	`var(--fandhe-space-1)`
`--fandhe-radio-group-item-gap`	`var(--fandhe-space-2)`
`--fandhe-radio-group-label-basis`	`auto`

Examples

説明文付き（label + description の合成）

radio_group は description 専用パートを持たない（headless anatomy に存在せず、chakra-ui も同様に呼び出し側合成のため。fandhe_frontend_pre_styled_ui::radio_group rustdoc「shadcn/ui との突合」節参照）。item-text の後ろへ通常の子ノードとして fg-muted + 1 段小さいフォントサイズの説明文を並べるだけで再現できます。

Notifications

All

Receive all notifications for this project.

Important only

Receive notifications only for mentions and direct messages.

Accessibility

WAI-ARIA

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