loom muslin

Combobox

Searchable select: type to filter, pick to choose. Custom input and listbox; no native dropdown UI.

Previewlive — edit controls below

Content

Appearance

State

Search an invoice

Type to filter; the value reported is the option's value.

import { Combobox } from "@loom/muslin-react";

const [invoice, setInvoice] = useState("");

<Combobox
  aria-label="Find invoice"
  placeholder="Search invoices…"
  value={invoice}
  onChange={setInvoice}
  options={[
    { value: "INV-2041", label: "INV-2041 · Jane Cooper" },
    { value: "INV-2040", label: "INV-2040 · ACME Corp" },
  ]}
/>

Pick several invoices

import { Combobox } from "@loom/muslin-react";

<Combobox
  aria-label="Link invoices"
  multiple
  onValuesChange={(values) => link Expenses.to(values)}
  options={invoices.map((i) => ({ value: i.id, label: `${i.id} · ${i.customer}` }))}
/>