Skip to content

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

Free

Create New Option Inline Combobox for Svelte

A tag combobox that adds a Create row, plus icon included, when the typed name is not already in the list.

UI library: Ark UI

Type a name that is not already a tag and a Create row appears under the matches, with a plus icon and the typed text. Picking it adds the tag and selects it.

Use it for tags and labels people invent as they go. A fixed set, with no create, is a Select. In Svelte, Ark UI does not invent the new tag. This row does.

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-[250px] justify-between"
        )} bind:ref={triggerRef}>{value[0] ?? "Select or create tag..."}</ComboboxTrigger><ComboboxContent><ComboboxInput class="w-full" placeholder="Search or create..." showTrigger={false} /><ComboboxList>{#each options as tag (tag)}<ComboboxItem item={tag}>{tag}</ComboboxItem>{/each}{#if canCreate && options.length > 0}<ComboboxSeparator />{:else}{/if}{#if canCreate}<ComboboxItem class="gap-2" item={CREATE} showIndicator={false}><PlusIcon aria-hidden="true" class="size-4" />Create "{search.trim()}"</ComboboxItem>{:else}{/if}</ComboboxList></ComboboxContent></Combobox>

FAQ

When does the Create row show?

When the trimmed search isn't empty and isn't already one of the tags. The demo keeps the search text in state to work that out.

How is the Create row built?

As one more option with a special value, after a ComboboxSeparator, showing a PlusIcon and Create followed by the text in quotes. Being an option, it's reached with the arrow keys and picked with Enter.

What happens when it's picked?

The change handler sees the special value, adds the text to the tags and selects the new tag instead.

Which tags exist at first?

Tag 1, Tag 2 and Tag 3. The search box says Search or create..., and the button says Select or create tag... before a pick.

How do I save new tags?

The demo keeps them in state, so they're gone on reload. Call your API in the handler and add the tag once it's saved.

Is Tag 1 the same as tag 1?

For the Create row, no: the check is exact. Compare in lower case if names shouldn't differ only by case.

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