Select
Displays a list of options for the user to pick from, triggered by a button.
Apple
Banana
Blueberry
Grapes
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/select.tsx — opened/selected by the island (data-ui="select-*")
export function Select(o) {
const items = o.options.map((op) => \`<div data-ui="select-item" data-value="\${op.value}" class="relative flex cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm hover:bg-accent">\${op.label}</div>\`).join("");
return \`<div data-ui="select" class="relative \${o.class || ""}">
<button data-ui="select-trigger" class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm">
<span data-ui="select-value" class="text-muted-foreground">\${o.placeholder}</span></button>
<div data-ui="select-content" hidden class="absolute z-50 mt-1 w-full rounded-md border bg-popover p-1 shadow-md">\${items}</div></div>\`;
}
Installation
$ bext ui add select
Copy and paste the following into src/components/ui/select.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/select.tsx — opened/selected by the island (data-ui="select-*")
export function Select(o) {
const items = o.options.map((op) => \`<div data-ui="select-item" data-value="\${op.value}" class="relative flex cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm hover:bg-accent">\${op.label}</div>\`).join("");
return \`<div data-ui="select" class="relative \${o.class || ""}">
<button data-ui="select-trigger" class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm">
<span data-ui="select-value" class="text-muted-foreground">\${o.placeholder}</span></button>
<div data-ui="select-content" hidden class="absolute z-50 mt-1 w-full rounded-md border bg-popover p-1 shadow-md">\${items}</div></div>\`;
}
This component is interactive — make sure the shared island is loaded (see Islands). It reacts to data-ui="select" hooks.
On This Page