Skip to content

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

Free

With Validation Feedback Combobox for Svelte

A required currency combobox that shows a destructive border and Please select a currency until one is picked.

UI library: Ark UI

Until a currency is picked, the button has a destructive border and Please select a currency shows under it. USD, EUR, GBP, JPY, and CAD are the list. Picking one clears the border and the message.

Use it in a form where the combobox cannot be left empty. A whole form of rules belongs on a Field, not on this one message. In Svelte, Ark UI does not require a currency. The demo adds the error.

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="flex flex-col gap-2"><Combobox collection={collection} invalid={Boolean(error)} onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{ getAnchorElement: () => triggerRef }} selectionBehavior="clear" value={value}><ComboboxTrigger class={cn(
            buttonVariants({ variant: "outline" }),
            "w-[200px] justify-between",
            error && "border-destructive"
          )} bind:ref={triggerRef}>{value[0] ?? "Select currency..."}</ComboboxTrigger><ComboboxContent><ComboboxInput class="w-full" placeholder="Search currency..." showTrigger={false} /><ComboboxEmpty>No currency found.</ComboboxEmpty><ComboboxList>{#each collection.items as item (item)}<ComboboxItem item={item}>{item}</ComboboxItem>{/each}</ComboboxList></ComboboxContent></Combobox>{#if error}<p class="text-destructive text-xs">{error}</p>{:else}{/if}</div>

FAQ

When does the error show?

Whenever no currency is selected. The message is worked out from the value on every render, so there's no separate error state to keep in sync.

How does the button show the error?

It gets border-destructive while the value is empty, and the message is a text-destructive text-xs paragraph below. invalid on Combobox marks the field invalid too.

How do I clear the message?

Pick any currency. The value is no longer empty, so the border and the message go away.

Which currencies are listed?

USD, EUR, GBP, JPY and CAD. The search box says Search currency..., and No currency found. shows when nothing matches.

Should the error show before anyone touches the field?

Usually not. Show it after a submit or after the field loses focus with no value. The demo shows it straight away so the state is visible.

Does it work with a form library?

Yes. Pass the library's value and change handler to the combobox and its error message to the paragraph.

API Reference

Combobox

Sets collection={collection}, invalid={Boolean(error)}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning and getAnchorElement. The rest is on the Combobox page.

All 42 combobox examples