1

ComboboxNew

A filterable select with live search, proximity highlight riding the filter, clearable input, and native <select> mirror for forms.

Dependencies

motion

Interaction Type

Type to filter options. Arrow keys navigate matches. Enter commits. The highlight springs to the new first match on each keystroke.

Props

Options you can pass to customize this component.

Prop
Type
Description
options*
{ value: string; label: string; description?: string }[]

The options to filter.

value
string

Controlled value.

onValueChange
(value: string) => void

Called on selection.

placeholder
string

Input placeholder. Defaults to "Search…".

clearable
boolean

Show clear button. Defaults to true.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/combobox.json

How to use

<Combobox options={[{ value: 'ber', label: 'Berlin' }]} value={city} onValueChange={setCity} placeholder="Search city…">
  <ComboboxInput />
  <ComboboxContent />
</Combobox>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/combobox.json