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"

Component Source

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

Component Source

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	Description
value*	string	—	Selected or typed string value.
onChange*	(value: string) => void	—	Callback fired when user selects or types a value string.
options*	string[]	—	List of string option items for autocomplete filtering.
prettyOptionLabel	(val: string) => string	—	Optional formatter function for option labels.
size	"sm" \| "md"	md	Size variant: "sm" (28px height, matching Select sm) or "md" (32px height). Default "md".

* required