Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

With Default Selected Value Combobox for React

A language combobox that opens with English already selected, so the button shows it on first render.

English is selected from the first render. The button shows English, and the list marks that row. The other languages are still there to search.

Use it for a setting with a sensible default, or to show a value saved earlier. A field that must start empty is a Select with a placeholder. In React, Base UI shows that initial value on the button.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Combobox anatomy: control, input, trigger, content, item, item indicator

Usage

<Combobox defaultValue={languages[0]} items={languages}>
  <ComboboxTrigger
    render={
      <Button className="w-[200px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select language..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search language..." showTrigger={false} />
    <ComboboxEmpty>No language found.</ComboboxEmpty>
    <ComboboxList>
      {(item: Language) => (
        <ComboboxItem key={item.value} value={item}>
          {item.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

FAQ

How is English selected on first render?

defaultValue is the English item.

Can it be changed afterwards?

Yes. The default is only the starting point. Picking another language replaces it.

Which languages are in the list?

English, Spanish, French, German and Italian. The search box says Search language..., and No language found. shows when nothing matches.

How is English marked when the list opens?

ComboboxItem shows its check on the selected row, so English has it until another language is picked.

How do I start from a saved value?

Pass the saved value instead of English. When it can change from outside the combobox, control the value and update it on every change.

What does the button show?

The selected language, so English at first. Select language... only shows if the value is empty.

API Reference

Combobox

Sets defaultValue={languages[0]}, items={languages}, placeholder="Select language...", placeholder="Search language...", showTrigger={false} and value={item}. The rest is on the Combobox page.

Button

Sets variant="outline". The rest is on the Button page.

All 42 combobox examples