Combobox

Search and select from a list without leaving the field.

npx shadcn@latest add @silicon-ui/combobox
fieldsearch
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/combobox

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/combobox/combobox.tsx
    • components/silicon-ui/combobox/combobox.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Combobox } from "@/components/silicon-ui/combobox/combobox";

API reference

PropTypeDefault
label*string—
options*ComboboxOption[]—
valuestring—
defaultValuestring""
onValueChange(value: string) => void—
descriptionstring—
placeholderstring"Search or select…"
emptyMessagestring"No matches found"
classNamestring—

Also accepts the props of InputHTMLAttributes<HTMLInputElement>, except value, defaultValue, onChange, placeholder.

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens