@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: trueare 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…"
/>

<script setup>
import { Combobox } from "@usevyre/vue";
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 = ref(null);
</script>
<template>
  <Combobox
    :options="languages"
    v-model="lang"
    placeholder="Search language…"
  />
</template>

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" />

<Combobox :options="options" v-model="val" size="sm" placeholder="Small" />
<Combobox :options="options" v-model="val" size="md" placeholder="Medium" />
<Combobox :options="options" v-model="val" 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…"
/>

<Combobox
  :options="options"
  v-model="val"
  empty-text="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 emitsupdate:modelValue automatically. Pass null as the initial value to start with no selection.

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.

AI Context

Valid props

Prop	Values	Default
`size`	`"sm"`\|`"md"`\|`"lg"`	`md`
`disabled`	`true`\|`false`	`false`
`disablePortal`	`true`\|`false`	`false`

Common AI mistakes

Combobox value=""→ Use value={null} for no selection
Combobox options={string[]}→ Use [{ value: 'ts', label: 'TypeScript' }]
Using Combobox for command palette→ Use Command for command palettes

Quick examples

Searchable language picker

const [lang, setLang] = useState<string | null>(null);
<Combobox
  options={[{ value: "ts", label: "TypeScript" }, { value: "go", label: "Go" }]}
  value={lang}
  onChange={setLang}
  placeholder="Search language…"
/>

← Checkbox Command →