Listbox

単一/複数選択の一覧から選ばせる、常時展開のリスト部品です（ポップオーバー型の Combobox/Select と異なり、content パーツ自身がフォーカスを受けます）。multiple の有無で aria-multiselectable・単一/複数選択のセマンティクスを切り替えます。

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

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

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

Demo

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

FruitApple

Features

root/label/content/item_group/item_group_label/item/item_text/item_indicator/value_text の anatomy を持ち、content 自身がフォーカスを受ける常時展開のリストである（crate::combobox/select のようなポップオーバー型とは異なる、listbox.rs:1-9, 64）。
content は role="listbox" + tabindex="0" を固定付与し、multiple のとき aria-multiselectable="true" を付与する（single モードでは省略、listbox.rs:117-146）。
item は role="option" + aria-selected を固定付与し、disabled のとき aria-disabled="true" と data-disabled を対で付与する（div[role="option"] はネイティブ disabled を持たないため、listbox.rs:191-233）。
activedescendant が Some のとき content へ aria-activedescendant を付与し、現在ハイライト中の item の id と対応させる（listbox.rs:121-127）。

Anatomy

root
  label
  content
    item-group
      item-group-label
      item
        item-text
        item-indicator
  value-text

API Reference

Arguments

Name	Type	Description
root(selection_state, disabled)	OpenState, bool	選択有無・無効化を data-* へ反映する（listbox.rs:88-99）。
content(multiple, id, labelledby, activedescendant)	bool, Option<&str>, Option<&str>, Option<&str>	aria-multiselectable/aria-labelledby/aria-activedescendant の各付与条件（listbox.rs:127-146）。
item(selected_state, disabled, highlighted, value, id)	OpenState, bool, bool, &str, Option<&str>	role="option" を持つ選択肢 1 個の状態。value は data-value として既定エスケープ経由で出力される（listbox.rs:207-233）。
attrs / children	Vec<(&str, &str)> / Vec<Node>	各パーツ共通の追加属性・子ノード（代表 1 行に集約）。

Data Attributes

Part	Attribute	Observed Values
item	data-highlighted
item	data-state	closed, open
item	data-value	apple, banana
item-indicator	data-state	closed, open
root	data-state	open

Examples

Multiple selection

aria-multiselectable="true" の Listbox の組み立て例です。

multiple=true（aria-multiselectable="true"）の Listbox の組み立て例です。

Country

Accessibility

WAI-ARIA

Attribute	Description
role="listbox"	content パーツへ固定付与する（listbox.rs:135）。
aria-multiselectable	multiple が true のときのみ "true" を付与する（listbox.rs:137-139）。
aria-labelledby	content の labelledby が Some のときのみ付与する（listbox.rs:143-145）。
role="option" / aria-selected / aria-disabled	item パーツへ固定付与する（aria-disabled は disabled が true のときのみ、listbox.rs:217-227）。