Forms

Combobox

A text field with a filtered list of choices, for long lists where people type to search (people, countries, components). Follows the ARIA combobox pattern: focus stays in the input, arrows move through the list, Enter picks, Escape closes (and clears the text when already closed). Matching text is highlighted.

Assignee

Type to filter

demos/combobox.tsx

import { Combobox } from "pixelbits/combobox";
import { Field } from "pixelbits/field";

const people = [
  "Aria Moradi",
  "Karen Ross",
  "Noah Kim",
  "Sara Ahmadi",
  "Leo Park",
  "Mina Rahimi",
].map((n) => ({
  value: n.toLowerCase().replace(" ", "-"),
  label: n,
}));

export default function Demo() {
  return (
    <Field label="Assignee" description="Type to filter" className="w-full max-w-sm">
      <Combobox options={people} placeholder="Search people" />
    </Field>
  );
}

Installation

npm: import

import { Combobox } from "pixelbits/combobox";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/combobox.json

API

<Combobox>

Example

<Field label="Assignee">
  <Combobox options={people} start={<SearchIcon />} placeholder="Search people" onValueChange={assign} />
</Field>

Prop	Type	Default	Description
options*	Option[]	—	All choices; the list shows the ones that match what is typed.
value	string	—	The selected value (controlled). Use `""` for none.
defaultValue	string	—	The value selected at first (uncontrolled).
onValueChange	(value: string) => void	—	Called with the value the user picked.
onQueryChange	(query: string) => void	—	Called with the text as the user types, for example to load options from a server. The list is still filtered with `filter` unless it is `false`.
filter	((option: Option, query: string) => boolean) \| false	containsFilter (label contains the text, ignoring case)	Which options match the typed text. `false` shows every option (when the server already filters them).
emptyText	ReactNode	"No results"	Shown in the list when nothing matches.
start	ReactNode	—	Content before the text, usually a search icon.
name	string	—	Form field name: a hidden input carries the selected value.
size	"sm" \| "md" \| "lg"	"md"	Height: `"sm"` 32 px, `"md"` 40 px, `"lg"` 48 px.

Also accepts every prop of Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size">.