Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Combobox

Combobox

Autocomplete input and command palette with a list of suggestions.

Installation

npx shadcn@latest add https://ui.saturation.io/r/combobox.json

Usage

1600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { Combobox } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">'@/components/ui/combobox'
2 
3600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">export 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">default 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">function Example() {
4 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">return 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400"> />
5}

Examples

Basic

A basic combobox with searchable options.

With Status

A combobox with status indicators and custom rendering.

With Icon

A combobox with icons for each option.

With User

A combobox displaying user information with avatars and email addresses.

With Groups

A combobox with grouped options organized by category.

Multiple Selection

A combobox that allows selecting multiple items with expandable badge display.

API Reference

Popover

The combobox is built using the Popover component. See the Popover documentation for more details.

Command

The combobox uses the Command component for the searchable list. See the Command documentation for more details.

On This Page

  • Installation
  • Usage
  • Examples
  • Basic
  • With Status
  • With Icon
  • With User
  • With Groups
  • Multiple Selection
  • API Reference