Skip to content

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

Free

Large Size Variant Combobox for Ark UI

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, Ark 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
  collection={collection}
  onInputValueChange={handleInputValueChange}
  onValueChange={handleValueChange}
  positioning={{ getAnchorElement: () => triggerRef.current }}
  selectionBehavior="clear"
  value={value}
>
  <ComboboxTrigger
    className={cn(
      buttonVariants({ size: "lg", variant: "outline" }),
      "w-[280px] justify-between text-base"
    )}
    ref={triggerRef}
  >
    {selected ? selected.label : "Select priority level..."}
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput
      className="w-full"
      placeholder="Search priority..."
      showTrigger={false}
      size="lg"
    />
    <ComboboxEmpty>No priority found.</ComboboxEmpty>
    <ComboboxList>
      {collection.items.map((item) => (
        <ComboboxItem className="text-base" item={item} key={item.value}>
          {item.label}
        </ComboboxItem>
      ))}
{/* The rest of the file is under Installation. */}

FAQ

What makes the button large?

size="lg" on the outline button, with text-base and a fixed w-[280px]. The trigger takes them through buttonVariants.

Does the list use the same type size?

Yes. Each ComboboxItem has text-base. The search box also takes size="lg" on ComboboxInput.

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 collection={collection}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.

All 42 combobox examples