Combobox

A production-scale, light + dark Combobox component. Copy-paste via the CLI; you own the code.

npx lerpa-cli add combobox

Live preview available in the gallery.

Usage

import { Combobox } from "@lerpa/ui";

<Combobox />

Props

Prop	Type	Default
options	ComboboxOption[]	—
value	string	—
defaultValue	string	—
onValueChange	(value: string) => void	—
inputValue	string	—
defaultInputValue	string	—
onInputChange	(text: string) => void	—
placeholder	string	—
emptyMessage	React.ReactNode	—
clearable	boolean	—
disabled	boolean	—
id	string	—
name	string	—
className	string	—
contentClassName	string	—
filter	(option: ComboboxOption, query: string) => boolean	—

Accessibility

Keyboard accessible interactive elements.
Respects prefers-reduced-motion where animated.
Color is never the only signal.

Overview

The Combobox component is a UI component in Lerpa UI's 1318-item shadcn-compatible registry, built for React 19 and Tailwind CSS v4. It exposes 16 configurable props, documented in the table below. It builds on framer-motion, lucide-react. Install it once with the CLI and the source is written into your project as a file you own — read it, edit it, or remove it, with no version to lock.

Install options

Add Combobox with the Lerpa CLI, or with the shadcn CLI pointed at the registry URL — the source is shadcn-compatible, so either tool writes the same file.

# Lerpa CLI
pnpm dlx lerpa-cli add combobox

# shadcn-compatible
npx shadcn add https://lerpaui.com/r/combobox.json

Dependencies

framer-motion
lucide-react

Related components

Browse the full component gallery.