Skip to content

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

Free

Large Size Variant Combobox for React

A large priority combobox with a taller button and larger text for Low, Medium, High, and Urgent.

The button uses the large size and larger text, and the options do too. The choices are Low Priority, Medium Priority, High Priority, and Urgent Priority.

Use it for the main choice on a page, or anywhere a finger needs a bigger target. A dense toolbar wants the small Combobox instead. In React, Base UI does not change what a pick does at this size.

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 items={priorities}>
  <ComboboxTrigger
    render={
      <Button
        className="w-[280px] justify-between text-base"
        size="lg"
        variant="outline"
      />
    }
  >
    <ComboboxValue placeholder="Select priority level..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search priority..." showTrigger={false} />
    <ComboboxEmpty>No priority found.</ComboboxEmpty>
    <ComboboxList>
      {(item: Priority) => (
        <ComboboxItem className="text-base" key={item.value} value={item}>
          {item.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

FAQ

What makes the button large?

size="lg" on the outline button, with text-base and a fixed w-[280px]. They're props of the Button the trigger renders.

Does the list use the same type size?

Yes. Each ComboboxItem has text-base.

What are the options?

Low Priority, Medium Priority, High Priority and Urgent Priority. The search box says Search priority..., and No priority found. shows when nothing matches.

What does the button show?

Select priority level... until a priority is picked, then its label.

How wide is the list?

It opens at the width of the button, so the 280px trigger gives a list just as wide.

Can I mix sizes in one form?

Keep the fields in one row the same size. Use the large one for a single prominent choice, and the default size for the rest of the form.

API Reference

Combobox

Sets items={priorities}, placeholder="Select priority level...", placeholder="Search priority...", showTrigger={false} and value={item}. The rest is on the Combobox page.

Button

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

All 42 combobox examples