Checkbox Group

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

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

Demo

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 で行う。
data-orientation="horizontal" では折り返し（flex-wrap: wrap）付きの横並びへ切り替わる。
root の data-invalid は custom property 経由で item-control の border-color へ伝播する（headless 層が CheckboxGroupProps 経由で出力する、イシュー #1603。attrs 経由の直接付与も引き続き有効）。root の data-disabled は CSS のみでは各 item のネイティブ入力を実際に無効化できない（タブ順序を変更できない）ため伝播しない。グループ全体を無効化する場合は、各 item・checkbox::hidden_input の disabled を利用者が一貫して付与する。
size は control 寸法・root/item 余白・font-size を custom property 経由で連動させ、label（グループ見出し）は medium ウェイト、item-text（項目）は通常ウェイトの 2 段階の型階層を持つ。

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-invalid`	（値なし）
`root`	`data-orientation`	`horizontal`, `vertical`

CSS Variables

Variable	Default
`--fandhe-checkbox-group-check-height`	`0.5rem`
`--fandhe-checkbox-group-check-width`	`0.25rem`
`--fandhe-checkbox-group-control-border-color`	`var(--fandhe-color-border)`
`--fandhe-checkbox-group-control-size`	`1rem`
`--fandhe-checkbox-group-font-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-checkbox-group-gap`	`var(--fandhe-space-1)`
`--fandhe-checkbox-group-item-gap`	`var(--fandhe-space-2)`
`--fandhe-checkbox-group-label-basis`	`auto`

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` と対で付与する。