Skip to content

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

Free

With Default Selected Value Combobox for Svelte

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

UI library: Ark UI

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 Svelte, Ark UI shows that initial value on 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

<Combobox collection={collection} onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{ getAnchorElement: () => triggerRef }} selectionBehavior="clear" value={value}><ComboboxTrigger class={cn(
          buttonVariants({ variant: "outline" }),
          "w-[200px] justify-between"
        )} bind:ref={triggerRef}>{#if selected}{selected.label}{:else}{"Select language..."}{/if}</ComboboxTrigger><ComboboxContent><ComboboxInput class="w-full" placeholder="Search language..." showTrigger={false} /><ComboboxEmpty>No language found.</ComboboxEmpty><ComboboxList>{#each collection.items as item (item.value)}<ComboboxItem item={item}>{item.label}</ComboboxItem>{/each}</ComboboxList></ComboboxContent></Combobox>

FAQ

How is English selected on first render?

The demo holds the value and starts it at ["en"]. The value is an array of item values.

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

All 42 combobox examples