Skip to content
fandhe-frontend
GitHub

Checkbox Group

「0 個以上の項目が同時選択される」複数選択グループです。単一選択版の Radio Group と対称の構造を持ち、ネイティブ <input type="checkbox">（checkbox mod の hidden_input を再利用）をラベル配下へ入れ子にすることで、クリック委譲を JS なしで成立させます。

fandhe-frontend-headless-ui の checkbox_group mod が提供する構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを持つ unstyled 部品です。Themes 版が備える見た目は持たず、anatomy・ARIA・data-* のみを提供します。CSS は利用者が当てます。

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

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

Demo

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

Fruits

Features

  • root（div、role="group"）/label/item（label）/item_control/item_indicator/item_text の 6 パーツで「0 個以上の項目が同時選択される」複数選択を表現する（checkbox_group.rs:1-6, 36-45）。
  • labelled_by が Some のときのみ aria-labelledby を付与し、名前なし関連付けを作らない（checkbox_group.rs:135-137, 152-153）。
  • orientation が Some のときのみ data-orientation/aria-orientation を付与する（checkbox_group.rs:138-139, 149）。
  • ネイティブ入力は crate::checkbox::hidden_input を item（<label>）配下へ入れ子にして再利用し、item_control 自体には role="checkbox"/aria-checked を付与しない（二重読み上げ防止、checkbox_group.rs:11-16, 203-206）。

Anatomy

root
  label
  item
    item-control
      item-indicator
    item-text

API Reference

Arguments

NameTypeDefaultDescription
root(orientation)Option<Orientation>NoneSome のときのみ data-orientation/aria-orientation を付与する（checkbox_group.rs:138-139）。
root(labelled_by)Option<&str>NoneSome のときのみ aria-labelledby を付与する（label パーツの id と対で使う、checkbox_group.rs:135-137）。
item(checked, disabled, value)bool, bool, &str選択肢 1 個の状態と送信値。value は data-value として動的値のまま出力され既定エスケープを経由する（checkbox_group.rs:174-181）。
item_control(checked, disabled)bool, bool視覚的なチェックボックス外枠。item_indicator を子として渡す契約（styled recipe の中央揃えに効くため、checkbox_group.rs:200-222）。
attrs / childrenVec<(&str, &str)> / Vec<Node>各パーツ共通の追加属性・子ノード（代表 1 行に集約）。

Data Attributes

PartAttributeObserved Values
itemdata-statechecked, unchecked
itemdata-valueapple, banana
item-controldata-statechecked, unchecked
item-indicatordata-statechecked, unchecked
item-textdata-statechecked, unchecked

Examples

Vertical orientation

aria-labelledby・data-orientation="vertical" を付与した例です。

縦方向 orientation・aria-labelledby 付きの Checkbox Group の組み立て例です。

Toppings

Accessibility

Keyboard Interactions

KeyDescription
Spaceitem（<label>）配下の checkbox::hidden_input（<input type="checkbox">）が実体を担うため、ブラウザ標準のクリック委譲・トグル操作が働く（checkbox_group.rs:11-16, 170-176）。

WAI-ARIA

AttributeDescription
role="group"root パーツへ固定付与する（checkbox_group.rs:148）。
aria-labelledbyroot の labelled_by が Some のときのみ付与する（checkbox_group.rs:152-153）。
aria-orientationroot の orientation が Some のときのみ付与する（checkbox_group.rs:149）。