Combobox

Searchable autocomplete dropdown control combining text input typing with filtered Radix Popover item selection.

// Plain markup
import { Combobox } from "@shavin/ui";

Searchable preset picker with custom text entry

Utility Class

Current value: "mt-4"

import { Combobox } from "@shavin/ui";
import { useState } from "react";

const OPTIONS = ["mt-1", "mt-2", "mt-4", "mb-1", "mb-2", "mb-4"];
const [val, setVal] = useState("mt-4");

<div className="w-64">
  <Combobox
    value={val}
    onChange={setVal}
    options={OPTIONS}
    placeholder="Select or type custom class..."
  />
</div>

Autocomplete Search (Timezone)

Timezone

Selected: Asia/Kolkata

const TIMEZONES = ["America/New_York", "Europe/London", "Asia/Tokyo", "Asia/Kolkata"];
const [tz, setTz] = useState("Asia/Kolkata");

<div className="w-72">
  <Combobox
    value={tz}
    onChange={setTz}
    options={TIMEZONES}
    placeholder="Search timezone..."
  />
</div>

When to use what: Combobox vs Dropdown vs Select

Combobox: Use when users need to type to search/filter options OR enter a custom value that isn't in the predefined list (e.g. searching timezones, choosing a font size or custom class).

Dropdown: Native HTML <select> element. Best for standard form inputs where native OS select controls (iOS wheel / Android picker) are preferred.

Select: Radix-backed custom single-choice popover. Best for formatted list items with icons, descriptions, and custom item rendering where free-form text input is not allowed.

Prop	Type	Default
value*	string	—
onChange*	(value: string) => void	—
options*	string[]	—
prettyOptionLabel	(val: string) => string	—
size	"sm" \| "md"	—

* required