Skip to content

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

Free

Full Width Variant Combobox for React

A country combobox whose button stretches to the container, with the list opening at that same width.

The button takes the full width of its container. The list opens at that width, so the field lines up with other inputs in a column.

Use it in a form, a side panel, or a narrow screen where a fixed width looks stranded. A toolbar can keep a short Select. In React, Base UI anchors the list to 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

<div className="w-full">
  <Combobox items={countries}>
    <ComboboxTrigger
      render={<Button className="w-full justify-between" variant="outline" />}
    >
      <ComboboxValue placeholder="Select country..." />
    </ComboboxTrigger>
    <ComboboxContent>
      <ComboboxInput placeholder="Search country..." showTrigger={false} />
      <ComboboxEmpty>No country found.</ComboboxEmpty>
      <ComboboxList>
        {(item: Country) => (
          <ComboboxItem key={item.value} value={item}>
            {item.label}
          </ComboboxItem>
        )}
      </ComboboxList>
    </ComboboxContent>
  </Combobox>
</div>

FAQ

Which classes make it full width?

A wrapper div with w-full, and w-full justify-between on the trigger so the label sits at the start and the chevron at the end.

How does the list match the button's width?

ComboboxContent reads the width of the element it's anchored to, so a wider button gives a wider list without a width class on the popup.

What can I select?

United States, United Kingdom, Canada, Australia and Germany. The search box says Search country..., and No country found. shows when nothing matches.

What does the button show?

Select country... until a country is picked, then its name.

Can I cap the width on large screens?

Yes. Swap w-full on the wrapper for w-full max-w-md or similar. The button and the list follow the wrapper.

Does it work on phones?

Yes. The list opens under the button at the same width and scrolls when it's taller than the space below.

API Reference

Combobox

Sets items={countries}, placeholder="Select country...", placeholder="Search country...", 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