Checkbox Group

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

複数選択の選択肢グループです。Radio Group と対称の構造を持ちますが、状態機械には「0 個以上の項目が同時選択される」複数選択状態機械を使い、ネイティブ <input type="checkbox"> は Checkbox の hidden-input をそのまま再利用します。

Demo

複数選択の選択肢グループ。ネイティブ input[type="checkbox"]（fandhe_frontend_pre_styled_ui::checkbox::hidden_input の再利用）による同時選択・キーボード操作を data-scope="checkbox-group" の anatomy へ重ねます。

ColorsRedGreenBlue

Features

`size`/`colorPalette` variant クラスを `root` へ付与し、headless-ui の `checkbox_group::root` へ委譲する。
`radio_group` と対称の構造だが、複数選択状態機械（`MultiSelect`）を埋め込み、dispatch は `select`/`deselect`/`toggle` の 3 語彙を受理する。
ネイティブ `<input type="checkbox">` は自前パーツを持たず、`checkbox::hidden_input` を `item` 配下へ入れ子で再利用する（`hidden-input` の視覚的非表示化は `checkbox` の recipe が担う）。
`aria-checked`/`role="checkbox"` は `item-control` へ重複付与しない（二重読み上げ防止）。グループ全体の関連付けは `root` の `aria-labelledby` で行う。

Anatomy

root
  label
  item
    item-control
      item-indicator
    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-state	checked, unchecked
item	data-value	blue, green, red
item-control	data-disabled
item-control	data-state	checked, unchecked
item-indicator	data-disabled
item-indicator	data-state	checked, unchecked
item-text	data-disabled
item-text	data-state	checked, unchecked
root	data-orientation	vertical

CSS Variables

Variable	Default
--fandhe-checkbox-group-check-height	0.5rem
--fandhe-checkbox-group-check-width	0.25rem
--fandhe-checkbox-group-control-size	1rem
--fandhe-checkbox-group-font-size	var(--fandhe-font-font-size-sm)

Accessibility

Keyboard Interactions

Key	Description
Space	ネイティブ `<input type="checkbox">`（`checkbox::hidden_input` の再利用）のブラウザ既定動作としてチェック状態をトグルする（ブラウザ実装依存、本フレームワークの JS 出力によらない）。

WAI-ARIA

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