Combobox

Searchable single-select with a query bar above a filtered list and a check for the active row.

Mira Studio
acm
Beste StudioDesign · 12 members
BesteworksEngineering · 34 members
Beste LabsResearch · 6 members

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Form18 } from "@/components/beste/piece/form18";

<Form18
  label="Primary workspace"
  value="Mira Studio"
  query="acm"
  options={[
    {
      "label": "Beste Studio",
      "detail": "Design · 12 members"
    },
    {
      "label": "Besteworks",
      "detail": "Engineering · 34 members"
    },
    {
      "label": "Beste Labs",
      "detail": "Research · 6 members"
    }
  ]}
  selectedIndex={0}
/>