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}
/>

More Form pieces

View all Form
Start typing to search
Beste Sözen
Beste SözenDesign lead
Mirko Petrov
Mirko PetrovEngineer
Noor Ahmed
Noor AhmedProduct

Contact Picker

form29

Searchable people picker with a focused search input above a list that tints the selected row.

Assign to
Filter people…
Beste Sözen
Beste Sözen
Andrea Kim
Andrea Kim
Noor Ahmed
Noor Ahmed
Jules Park
Jules Park

Assignee Picker

form20

Popover with a header label, filter bar, and a selectable person list that checks chosen rows.

Mira
Beste

Input Row

form8

Two inputs arranged side by side on a responsive grid for first/last names and paired fields.

USD · US Dollar

Native Select

form27

Open-state select showing the focused control and the flyout list with one option muted as chosen.

DesignPolishGood first issueAdd label

Multi Select

form16

Picker that keeps chosen options as removable violet pills next to a chevron to open the list.

Two-factor authenticationRequire a verification code at sign-in.

Toggle Switch

form21

Setting row with label, supporting copy, and a sliding switch that turns emerald when on.