Combobox

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

Primary workspace

Mira Studio

acm

Beste StudioDesign · 12 members

BesteworksEngineering · 34 members

Beste LabsResearch · 6 members

New here? Read the installation guide.

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

Primary contact

Start typing to search

Beste SözenDesign lead

Mirko PetrovEngineer

Noor AhmedProduct

Contact Picker

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

Assign to

Filter people…

Beste Sözen

Andrea Kim

Noor Ahmed

Jules Park

Assignee Picker

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

Default currency

USD · US Dollar

Native Select

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

Project labels

DesignPolishGood first issueAdd label

Multi Select

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

First name

Mira

Last name

Beste

Input Row

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

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

Toggle Switch

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