Combobox

Autocomplete input with a list of suggestions.

Loading…

"use client"

import * as React from "react"

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

const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export default function ComboboxDemo() {
  const [value, setValue] = React.useState("")

  return (
    <div className="w-full max-w-xs">
      <Combobox
        options={frameworks}
        value={value}
        onValueChange={setValue}
        placeholder="Select a framework"
        searchPlaceholder="Search framework…"
        emptyText="No framework found."
        className="w-full"
      />
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @kickresume/combobox

Usage

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

<div className="w-full max-w-xs">
  <Combobox
    options={frameworks}
    value={value}
    onValueChange={setValue}
    placeholder="Select a framework"
    searchPlaceholder="Search framework…"
    emptyText="No framework found."
    className="w-full"
  />
</div>

Examples

Basic

A simple combobox with a list of frameworks.

Loading…

"use client"

import * as React from "react"

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

const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export default function ComboboxBasic() {
  const [value, setValue] = React.useState("")

  return (
    <div className="w-full max-w-xs">
      <Combobox
        options={frameworks}
        value={value}
        onValueChange={setValue}
        placeholder="Select a framework"
        searchPlaceholder="Search framework…"
        emptyText="No framework found."
        className="w-full"
      />
    </div>
  )
}

Disabled

Use the disabled prop to disable the combobox.

Loading…

"use client"

import * as React from "react"

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

const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export default function ComboboxDisabled() {
  const [value, setValue] = React.useState("next")

  return (
    <div className="w-full max-w-xs">
      <Combobox
        options={frameworks}
        value={value}
        onValueChange={setValue}
        placeholder="Select a framework"
        disabled
        className="w-full"
      />
    </div>
  )
}

Disabled Items

Set disabled on an individual option to keep it in the list but prevent it from being selected.

Loading…

"use client"

import * as React from "react"

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

const exportFormats = [
  { value: "pdf", label: "PDF" },
  { value: "docx", label: "Word (.docx)" },
  { value: "txt", label: "Plain text" },
  { value: "png", label: "PNG image", disabled: true },
  { value: "json", label: "JSON (coming soon)", disabled: true },
]

export default function ComboboxDisabledItems() {
  const [value, setValue] = React.useState("")

  return (
    <div className="w-full max-w-xs">
      <Combobox
        options={exportFormats}
        value={value}
        onValueChange={setValue}
        placeholder="Select a format"
        searchPlaceholder="Search formats…"
        emptyText="No format found."
        className="w-full"
      />
    </div>
  )
}

Custom Text

Use the placeholder, searchPlaceholder, and emptyText props to customize the combobox's text.

Loading…

"use client"

import * as React from "react"

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

const roles = [
  { value: "swe", label: "Software Engineer" },
  { value: "pm", label: "Product Manager" },
  { value: "ux", label: "UX Designer" },
  { value: "data", label: "Data Analyst" },
  { value: "devrel", label: "Developer Advocate" },
]

export default function ComboboxCustomText() {
  const [value, setValue] = React.useState("")

  return (
    <div className="w-full max-w-xs">
      <Combobox
        options={roles}
        value={value}
        onValueChange={setValue}
        placeholder="Pick a target role…"
        searchPlaceholder="Search roles…"
        emptyText="No matching roles."
        className="w-full"
      />
    </div>
  )
}

API Reference

The Combobox composes the Popover and Command components into a single autocomplete input.

Combobox

Prop	Type	Default
`options`	`ComboboxOption[]`	—
`value`	`string`	—
`onValueChange`	`(value: string) => void`	—
`placeholder`	`string`	`"Select an option…"`
`searchPlaceholder`	`string`	`"Search…"`
`emptyText`	`string`	`"No results found."`
`disabled`	`boolean`	`false`
`className`	`string`	—

ComboboxOption

Prop	Type	Default
`value`	`string`	—
`label`	`string`	—
`disabled`	`boolean`	`false`