@usevyre/react @usevyre/vue

Combobox

A searchable dropdown with typeahead filtering, full keyboard navigation, and per-option disabled state. Differs from Select in that it renders a text input — use it when the list is long enough to warrant search.

Basic

Pass options, a controlled value, and onChange. Typing filters options by case-insensitive substring match. Options with disabled: true are shown but not selectable. 

import { Combobox } from "@usevyre/react";
import { useState } from "react";

const languages = [
  { value: "ts",  label: "TypeScript" },
  { value: "rs",  label: "Rust" },
  { value: "go",  label: "Go" },
  { value: "py",  label: "Python" },
  { value: "rb",  label: "Ruby", disabled: true },
];

const [lang, setLang] = useState<string | null>(null);

<Combobox
  options={languages}
  value={lang}
  onChange={setLang}
  placeholder="Search language…"
/>

Sizes

 
<Combobox options={options} value={val} onChange={setVal} size="sm" placeholder="Small" />
<Combobox options={options} value={val} onChange={setVal} size="md" placeholder="Medium" />
<Combobox options={options} value={val} onChange={setVal} size="lg" placeholder="Large" />

Custom empty state

Use emptyText to customise the message shown when no options match the current search query. 

<Combobox
  options={options}
  value={val}
  onChange={setVal}
  emptyText="No matching language found"
  placeholder="Search…"
/>

Keyboard navigation

↑ ↓ move between options. Enter selects the highlighted option. Escape closes the dropdown without changing the value. Clicking outside also closes the dropdown.

Vue v-model

In Vue, use v-model — it binds to modelValue and emits update:modelValue automatically. Pass null as the initial value to start with no selection.

Props

Props

Prop Type Default Description
options { value: string; label: string; disabled?: boolean }[] — List of selectable options.
value string | null — Controlled selected value. Pass null to clear.
onChange (value: string | null) => void — React only. Called when selection changes.
placeholder string "Search…" Input placeholder shown when no value is selected.
disabled boolean false Disables the combobox.
size "sm" | "md" | "lg" "md" Height scale.
emptyText string "No results" Text shown when the search query matches no options.
disablePortal boolean false Render the dropdown inline instead of teleporting it to <body>. By default the dropdown portals to body so it stays visible inside Modal / overflow:hidden containers.
class / className string — Additional CSS class.
← Checkbox Command →