Checkbox Group

Demo

Features

• root（div、role="group"）/label/item（label）/item_control/item_indicator/item_text の 6 パーツで「0 個以上の項目が同時選択される」複数選択を表現する（checkbox_group.rs:1-7, 36-56）。
• CheckboxGroupProps（disabled/readonly/invalid）を root と item 系 4 パーツ全てへ一律注入し、data-disabled/data-readonly/data-invalid を出力する（ark-ui Checkbox.Group props 相当、イシュー #1603）。
• labelled_by が Some のときのみ aria-labelledby を付与し、名前なし関連付けを作らない（checkbox_group.rs:236-238）。
• orientation が Some のときのみ data-orientation を付与する。role="group" は WAI-ARIA 1.2 の aria-orientation Used in Roles に含まれないため、aria-orientation は付与しない（イシュー #1603 是正、radio_group〔role="radiogroup"〕とは異なる）。
• ネイティブ入力は crate::checkbox::hidden_input を item（<label>）配下へ入れ子にして再利用し、item_control 自体には role="checkbox"/aria-checked を付与しない（二重読み上げ防止、checkbox_group.rs:11-16, 297-311）。CheckboxGroup::item_hidden_input は root の invalid/readonly もネイティブ <input> の aria-invalid/data-readonly へ OR 伝播する（イシュー #1603）。
• ark-ui が付与する data-hover/data-active/data-focus は出力しない（DOM ローカルな pointer/focus 操作状態のため、SSR 静的出力の関心外）。Radix Themes の RovingFocus（矢印キーによる項目間移動）は採用しない（ネイティブ input は各項目が独立した Tab ストップであり、checkbox-group 用の roving tabindex パターンは WAI-ARIA APG に無い）。

API Reference

Arguments

Data Attributes

Examples

Vertical orientation

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

Custom CSS

自前 CSS の最小例です（data-invalid・水平 orientation 付き）。

[data-scope="checkbox-group"][data-part="item-control"] {
  width: 1rem;
  height: 1rem;
  border: 1px solid #888;
  border-radius: 4px;
}
[data-scope="checkbox-group"][data-part="item-control"][data-state="checked"] {
  background: #2563eb;
  border-color: #2563eb;
}
[data-scope="checkbox-group"][data-part="item-control"][data-invalid] {
  border-color: #dc2626;
}
[data-scope="checkbox-group"][data-part="item-control"][data-focus-visible] {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
[data-scope="checkbox-group"][data-part="item"][data-disabled] {
  opacity: 0.5;
}
[data-scope="checkbox-group"][data-part="root"][data-orientation="horizontal"] {
  flex-direction: row;
  gap: 1rem;
}

Accessibility

Keyboard Interactions

WAI-ARIA