Combobox

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

Demo

headless-ui の Combobox（role="combobox"）に pre-styled-ui の recipe CSS を適用した静的掲示です。入力値 "e" による filter_options の絞り込み結果を候補として表示しています。"React" は選択済み（チェックマーク表示）、"Svelte" は highlight 中、"Vue" は disabled として固定しています。positioner はフロー内配置へ中和しています。

Framework

Features

headless-ui の combobox::root へ委譲し、size variant クラスのみを付与する。
開閉状態は OpenState（Open/Closed）で受け取る。

Anatomy

root
  label
  control
    input
    trigger
  positioner
    content
      item
        item-text
        item-indicator

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Size::Md`	サイズ variant。
`state`	`OpenState`	`OpenState::Closed`	開閉状態。
`attrs`	`Vec<(&str, &str)>`	—	root パーツへ合成する追加属性。
`children`	`Vec<Node>`	—	root 配下の子ノード。

Data Attributes

Part	Attribute	Observed Values
`content`	`data-state`	`open`
`control`	`data-state`	`open`
`input`	`data-state`	`open`
`item`	`data-disabled`	（値なし）
`item`	`data-highlighted`	（値なし）
`item`	`data-state`	`closed`, `open`
`item`	`data-value`	`react`, `svelte`, `vue`
`item-indicator`	`data-state`	`closed`, `open`
`positioner`	`data-state`	`open`
`root`	`data-state`	`open`
`trigger`	`data-state`	`open`

CSS Variables

Variable	Default
`--fandhe-combobox-content-padding`	`var(--fandhe-space-2)`
`--fandhe-combobox-control-padding`	`var(--fandhe-space-1) var(--fandhe-space-2)`
`--fandhe-combobox-input-padding`	`var(--fandhe-space-1) var(--fandhe-space-2)`
`--fandhe-combobox-item-padding`	`var(--fandhe-space-2) var(--fandhe-space-3)`