Skip to content

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

Free

Full Width Variant Combobox for Svelte

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

UI library: Ark UI

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 Svelte, Ark UI anchors the list to the button.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<div class="w-full"><Combobox collection={collection} onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{ getAnchorElement: () => triggerRef }} selectionBehavior="clear" value={value}><ComboboxTrigger class={cn(
            buttonVariants({ variant: "outline" }),
            "w-full justify-between"
          )} bind:ref={triggerRef}>{#if selected}{selected.label}{:else}{"Select country..."}{/if}</ComboboxTrigger><ComboboxContent><ComboboxInput class="w-full" placeholder="Search country..." showTrigger={false} /><ComboboxEmpty>No country found.</ComboboxEmpty><ComboboxList>{#each collection.items as item (item.value)}<ComboboxItem item={item}>{item.label}</ComboboxItem>{/each}</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. It's anchored to the trigger through positioning.getAnchorElement.

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

All 42 combobox examples