bx

Combobox

Autocomplete input and command palette with a list of suggestions.

tsx 
<Combobox
  name="framework"
  value="next"
  options={[
    { value: "next", label: "Next.js" },
    { value: "sveltekit", label: "SvelteKit" },
    { value: "nuxt", label: "Nuxt.js" },
  ]}
/>

Combobox — select searchable. Trigger bouton qui affiche la valeur choisie ; au clic, popover avec search input + liste filtrable des options. La valeur choisie va dans un hidden input pour form submission.

Vs Select (dropdown natif ou custom sans search). Utiliser Combobox dès que la liste dépasse ~10 options (recherche indispensable).

Installation

Terminal 
$ bext ui add combobox

Usage

tsx 
import { Combobox } from "@bext-stack/ui/primitives"

<Combobox
  name="framework"
  value={value}
  options={[
    { value: "next", label: "Next.js" },
    { value: "sveltekit", label: "SvelteKit" },
    { value: "nuxt", label: "Nuxt.js" },
    { value: "remix", label: "Remix" },
  ]}
  placeholder="Choose a framework"
/>

Anatomy

<Combobox name="…" value={value} options={[...]} />
  ├── <input type="hidden" name value />
  ├── <button data-ui-cb-trigger>
  │   ├── <span>{label ou placeholder}</span>
  │   └── <ChevronDown />
  └── <div data-ui-cb-pop>
      ├── <input data-ui-cb-search placeholder="Rechercher…" />
      └── <div data-ui-cb-list>
          └── <div data-ui-cb-item data-value>{label}</div> × N

API Reference

Combobox

Prop Type Default Description
name string — Nom du hidden input pour form submission.
value string — Value sélectionnée (matche options[].value).
options ComboboxOption[] — Liste de { value, label, disabled? }.
placeholder string "Sélectionner…" Texte trigger quand vide.
emptyLabel string "Aucun résultat." Message si search sans match.
required boolean — Pose required sur hidden.
disabled boolean — Désactive le trigger.
triggerWidth string (utility) "w-[240px]" Largeur du trigger button.

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute On Values Description
data-ui="combobox" root — Marqueur racine.
data-ui-cb-trigger trigger button — Cliquer ouvre/ferme le popover.
data-ui-cb-search input — Input fuzzy-filter — l'island filtre les items par data-label.
data-ui-cb-item chaque option data-value data-label data-disabled? Cliquer set value + ferme.
data-ui-cb-empty div hidden par défaut Affiché quand aucun item ne matche.

Keyboard

Key Action
Enter / Space Sur trigger fermé : ouvre. Sur item : sélectionne + ferme.
Escape Ferme le popover ouvert.
Typing Le focus va sur le search input ; taper filtre en temps réel.

Accessibility

Trigger porte aria-haspopup="listbox" aria-expanded. Liste porte role="listbox", items role="option".

Le hidden input est un vrai champ de form — validation HTML5 native (required) fonctionne.

Examples

Placeholder (vide)

tsx 
<Combobox name="x" options={…} placeholder="Choose one" />
Try it live
Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser
Pure PRISM + real bext signals — fine-grained, no re-render.
← Collapsible Command →