Select

Displays a list of options for the user to pick from, triggered by a button.

tsx

1
2
3
4
5
6
7
8<Select
  name="fruit"
  placeholder="Select a fruit"
  options={[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
  ]}
/>

Select — dropdown de sélection custom (pas <select> natif). Idéal pour 3-20 options, un seul choix. Au-delà, préférer Combobox (avec search).

Installation

Terminal

$ bext ui add select

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12import { Select } from "@bext-stack/ui/primitives"

// Raccourci avec options prop
<Select
  name="fruit"
  placeholder="Select a fruit"
  options={[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    { value: "orange", label: "Orange" },
  ]}
/>

Anatomy

<Select name value>
  ├── <SelectTrigger><SelectValue placeholder="…" /></SelectTrigger>
  └── <SelectContent>
      ├── <SelectItem value="a">A</SelectItem>
      └── <SelectItem value="b">B</SelectItem>

API Reference

Select

Prop	Type	Default	Description
name	string	—	Nom form.
value	string	—	Value sélectionnée.
placeholder	string	—	Raccourci — équivalent à passer un SelectValue.
options	SelectOption[]	—	Raccourci — génère les SelectItem depuis un array [{value, label}].

SelectTrigger

Prop	Type	Default	Description
children	ReactNode	—	Bouton visible avec chevron down.

SelectContent

Prop	Type	Default	Description
children	ReactNode	—	Popover avec la liste des items.

SelectItem

Prop	Type	Default	Description
value	string	—	undefined
children	ReactNode	—	Label affiché.

Data Attributes

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

Attribute	On	Values	Description
data-ui="select"	root	—	L'island toggle le SelectContent.
data-ui="select-trigger"	trigger	—	undefined
data-ui="select-item"	item	data-value	Cliquer sélectionne + ferme.

Keyboard

Key	Action
`Space / Enter`	Toggle le popover ; sur item : sélectionne.
`Escape`	Ferme.

Accessibility

Trigger porte role="combobox" aria-haspopup="listbox", liste role="listbox", items role="option".

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

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A select opens a popover list and sets the chosen value. An `open`
// signal toggles the list via <Show>; picking sets a `value` signal —
// the trigger label, the check marks and the readout all bind to it.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Select</h1>
      <p style="color:#64748b;margin-top:0">A dropdown for picking one value from a list (signal-driven).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// A select opens a popover list and sets the chosen value. The open
// state + selection live in a "use client" island.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Select</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A dropdown for picking one value from a list.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Scroll Area Separator →

On This Page