Combobox

A searchable select built from Popover and Command. Single or multiple, groups, descriptions, icons and animated badges.

Inputs

Framework

Playground

Tweak the props, the preview and the code follow.

Props

multiple

size

placeholder

disabled

const options = [
  { value: "next", label: "Next.js" },
  { value: "astro", label: "Astro" },
  // …
]

<Combobox options={options} placeholder="Select a framework" />

Installation

npx @plumsydev/plum-ui add combobox

Also pulls in popover, command automatically.

Usage

import { Combobox } from "@/components/ui/combobox"

<Combobox
  options={[
    { value: "next", label: "Next.js" },
    { value: "astro", label: "Astro" },
  ]}
  placeholder="Select a framework"
/>

Examples

Multiple

Selected items become badges you can remove inline.

Reviewers

2 reviewers will be notified.

Groups

Function region

API Reference

Combobox

Prop	Type	Default
`options*` The choices.	`{ value, label, description?, icon?, group?, disabled?, keywords? }[]`	`—`
`multiple` Switch `value` to `string[]`.	`boolean`	`false`
`value / defaultValue` Selected value(s).	`string \| string[]`	`—`
`onValueChange` Called on selection.	`(value) => void`	`—`
`placeholder` Trigger text when empty.	`string`	`"Select…"`
`searchPlaceholder` Search field placeholder.	`string`	`"Search…"`
`emptyText` Shown when nothing matches.	`ReactNode`	`"No results."`
`maxBadges` With `multiple`, badges shown before +n.	`number`	`3`

PreviousColor Picker NextCommand