Multi Select

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

DesignPolishGood first issueAdd label

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

Import & use
import { Form16 } from "@/components/beste/piece/form16";

<Form16
  label="Project labels"
  selected={[
    "Design",
    "Polish",
    "Good first issue"
  ]}
  placeholder="Add label"
/>

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.

Notifications

New bookings
Payment received
Weekly summary

Preferences Toggles

form35

A compact settings card listing labeled rows, each with an accent on/off toggle switch.

Delivery speed
Standard3–5 business days · Free
ExpressNext business day · $8
Same-dayOrder by noon · $14

Radio Group

form23

Radio-card list where the selected row picks up a primary ring and a tinted background.

Violet · #6D5EFA

Color Swatches

form26

Row of round color swatches where the selected one picks up an outer contrast ring.

USD · US Dollar

Native Select

form27

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