Combobox

Autocomplete input with a list of suggestions.

@@directive("'use client'")

let frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]

Installation

npx shadcn@latest add @rescript-shadcn/Combobox

Usage

let frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
 
<Combobox items=frameworks>
  <Combobox.Input placeholder="Select a framework" />
  <Combobox.Content>
    <Combobox.Empty> {"No items found."->React.string} </Combobox.Empty>
    <Combobox.List>
      {(item, _index) =>
        <Combobox.Item key=item value=item> {item->React.string} </Combobox.Item>}
    </Combobox.List>
  </Combobox.Content>
</Combobox>

Custom Items

Use itemToStringValue when your items are objects.

type framework = {
  label: string
  value: string
}
 
let frameworks = [
  { label: "Next.js", value: "next" },
  { label: "SvelteKit", value: "sveltekit" },
  { label: "Nuxt", value: "nuxt" },
]
 
module ExampleComboboxCustomItems = {
  @react.component
  let make = () => {
    <Combobox
      items={frameworks}
      itemToStringValue={(framework) => framework.label}
    >
      <Combobox.Input placeholder="Select a framework" />
      <Combobox.Content>
        <Combobox.Empty> {"No items found."->React.string} </Combobox.Empty>
        <Combobox.List>
          {(framework, _index) =>
            <Combobox.Item key={framework.value} value={framework}>
              {framework.label->React.string}
            </Combobox.Item>}
        </Combobox.List>
      </Combobox.Content>
    </Combobox>
  }
}

Multiple Selection

Use multiple with chips for multi-select behavior.

let frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
 
module ExampleComboboxMultiple = {
  @react.component 
  let make = () => {
  let (value, setValue) = React.useState<string[]>([])
 
    <Combobox
      items={frameworks}
      multiple
      value={value}
      onValueChange={v => setValue(_ => v)}
    >
      <Combobox.Chips>
        <Combobox.Value>
          {value.map((item) => (
            <Combobox.Chip key={item}> {item->React.string} </Combobox.Chip>
          ))}
        </Combobox.Value>
        <Combobox.ChipsInput placeholder="Add framework" />
      </Combobox.Chips>
      <Combobox.Content>
        <Combobox.Empty> {"No items found."->React.string} </Combobox.Empty>
        <Combobox.List>
          {(item, _index) => 
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>}
        </Combobox.List>
      </Combobox.Content>
    </Combobox>
  }
}

Examples

Basic

A simple combobox with a list of frameworks.

@@directive("'use client'")

let frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]

Multiple

A combobox with multiple selection using multiple and ComboboxChips.

@@directive("'use client'")

let frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]

Clear Button

Use the showClear prop to show a clear button.

@@directive("'use client'")

let frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]

Groups

Use ComboboxGroup and ComboboxSeparator to group items.

@@directive("'use client'")

type timezone = {

Custom Items

You can render custom component inside ComboboxItem.

@@directive("'use client'")

type country = {

Invalid

Use the aria-invalid prop to make the combobox invalid.

@@directive("'use client'")

let frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]

Disabled

Use the disabled prop to disable the combobox.

@@directive("'use client'")

let frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]

Auto Highlight

Use the autoHighlight prop automatically highlight the first item on filter.

@@directive("'use client'")

let frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]

Popup

You can trigger the combobox from a button or any other component by using the render prop. Move the ComboboxInput inside the Combobox.Content.

@@directive("'use client'")

type country = {

Input Group

You can add an addon to the combobox by using the InputGroupAddon component inside the ComboboxInput.

@@directive("'use client'")

type timezone = {

API Reference

See the Base UI documentation for more information.