Searchable select on cmdk: single or multiple, create new options as you type, hints under each option, disabled items. Backspace in an empty search removes the last pick. Light and dark. Part of the Layro System: layro.vercel.app.
import * as React from "react";
import { Combobox, Field } from "@/components/ui/combobox-multi-create";
/* Assigning a contract. Owner is a single choice from a searchable list
(Tom's invite is still pending, so he cannot own it yet). Tags take
several values and create new ones: type "renewal" and press Enter.
Watchers is a multi-select of the same people. */
const PEOPLE = [
{ value: "michael", label: "Michael Carter", hint: "michael@northwind.studio" },
{ value: "maya", label: "Maya Chen", hint: "maya@northwind.studio" },
{ value: "olivia", label: "Olivia Martinez", hint: "olivia@northwind.studio" },
{ value: "sarah", label: "Sarah Anderson", hint: "sarah@northwind.studio" },
{ value: "daniel", label: "Daniel Wilson", hint: "daniel@velalabs.com" },
{ value: "tom", label: "Tom Okafor", hint: "Invite pending", disabled: true },
];
export default function ComboboxDemo() {
const [owner, setOwner] = React.useState<string | undefined>("maya");
const [watchers, setWatchers] = React.useState<string[]>(["michael", "olivia"]);
const [tags, setTags] = React.useState<string[]>(["contract", "q4"]);
const [tagOptions, setTagOptions] = React.useState(
["contract", "q4", "legal", "urgent", "vela-labs"].map((t) => ({ value: t, label: t })),
);
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full max-w-[420px] min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-5 ring-1 ring-border sm:p-6">
<p className="text-[12px] text-muted-foreground">Document</p>
<h2 className="text-[16px] font-semibold tracking-[-0.01em]">Master services agreement — Vela Labs</h2>
<div className="mt-5 grid gap-4">
<Field label="Owner" hint="Gets the signing notifications">
<Combobox options={PEOPLE} value={owner} onValueChange={setOwner} placeholder="Assign an owner" searchPlaceholder="Search people" />
</Field>
<Field label="Watchers" optional>
<Combobox multiple options={PEOPLE} value={watchers} onValueChange={setWatchers} placeholder="Add watchers" searchPlaceholder="Search people" />
</Field>
<Field label="Tags" hint="Type to create a new tag">
<Combobox
multiple
options={tagOptions}
value={tags}
onValueChange={setTags}
placeholder="Add tags"
searchPlaceholder="Find or create a tag"
onCreate={(t) => {
setTagOptions((o) => [...o, { value: t, label: t }]);
setTags((v) => [...v, t]);
}}
/>
</Field>
</div>
</div>
</div>
);
}
Part of Layro System — browse the full library on 21st.dev.