Components

Combobox

Mixed (Popover+Command)

Searchable dropdown component for selecting from a list of items.

Basic Example

Simple combobox with search functionality.

Selected value:

No selection

Popover with Icons

Using combobox pattern with icons for visual feedback.

Status

Disabled State

Combobox can be disabled to prevent user interaction.

Multiple Selection

Select multiple items from the list.

Selected:

No selection

Grouped Items

Using the custom component with grouped items.

Selected value:

No selection

Multiple Selection

Using the custom component with multiple selection enabled.

Selected:

No selection

Serverside Fetch

Fetching data from an API with loading state and refresh capability.

Selected user:

No selection

0 users loaded

Features

Search Functionality

Built-in search to filter through large lists quickly.

Accessible

Keyboard navigation and screen reader support.

Customizable

Flexible props for different use cases.

Responsive

Works seamlessly on mobile and desktop.

Installation

import Combobox from '@lib/ui/organism/combobox';

API Reference

Combobox Props

Prop
Type
Default
items
Array<{ value, label }>
[]
value
string | string[] (bindable)
""
placeholder
string
"Select an item..."
searchPlaceholder
string
"Search..."
emptyMessage
string
"No items found."
disabled
boolean
false
multiple
boolean
false
grouped
boolean
false
loading
boolean
false
onSelect
(value: string) => void
undefined
onRefresh
() => void
undefined

Documentation

For advanced examples and patterns, see the official shadcn-svelte documentation.