Primitive / Moleculebeta

Combobox

A searchable select built from Popover and Command.

Edit on GitHub

pnpm dlx @glinui/cli@latest add combobox

New project

Pick the framework we should scaffold. Type to filter the list.

Framework

Next.js starter selected

Installation

Install from

pnpm dlx @glinui/cli@latest add combobox

Prefer the package?

Usage

Combobox is single select only. For multiple selection, compose Popover with Command, or use a checkbox group.

Variants

import { Combobox } from "@glinui/ui"


const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro", keywords: ["islands"] },
  { value: "nuxt", label: "Nuxt" },
  { value: "sveltekit", label: "SvelteKit" }
]


export function Demo() {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      <Combobox variant="glinr" options={frameworks} aria-label="glinr" placeholder="glinr" />
      <Combobox variant="solid" options={frameworks} aria-label="solid" placeholder="solid" />
      <Combobox variant="plain" options={frameworks} aria-label="plain" placeholder="plain" />
      <Combobox variant="soft" options={frameworks} aria-label="soft" placeholder="soft" />
      <Combobox variant="outline" options={frameworks} aria-label="outline" placeholder="outline" />
      <Combobox variant="ghost" options={frameworks} aria-label="ghost" placeholder="ghost" />
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a backdrop behind it: pick Photo or Vivid in the stage backdrop switcher.

import { Combobox } from "@glinui/ui"


const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro", keywords: ["islands"] },
  { value: "nuxt", label: "Nuxt" },
  { value: "sveltekit", label: "SvelteKit" }
]


export function Demo() {
  return <Combobox variant="glass" options={frameworks} aria-label="Framework" />
}

Accessibility

Trigger is `role="combobox"` with `aria-expanded`, `aria-haspopup="listbox"` and `aria-controls`.
The panel is a filterable listbox (Command) with a labelled search field.
Focus returns to the trigger when the panel closes.
Pass `aria-label` or label it through Field.

Keyboard Interactions

Key	Action
`Enter / Space / Arrow Down`	Open the list from the trigger.
`Type`	Filter options.
`Arrow Up / Down`	Move the highlighted option.
`Enter`	Select the highlighted option.
`Escape`	Close without changing the value.

ARIA Attributes

`role="combobox"` and `aria-expanded` on trigger
`aria-invalid` and `aria-describedby` pass through
`role="listbox"` and `role="option"` from cmdk

Reduced Motion

Panel open and close animations are disabled under prefers-reduced-motion.

Affected properties

opacitytransform

API Reference

Prop	Type	Required	Default	Description
`options`	`ComboboxOption[]`	Yes	`-`	Required. Selectable items.
`value \| defaultValue`	`string`	-	`-`	Controlled or initial selection.
`onValueChange`	`(value: string) => void`	No	`-`	Fires on selection. Empty string means cleared.
`open \| onOpenChange`	`boolean \| (open: boolean) => void`	-	`-`	Controlled popover state.
`placeholder`	`string`	No	`Select an option`	Trigger text with no selection.
`searchPlaceholder`	`string`	No	`Search...`	Placeholder of the filter input.
`emptyText`	`string`	No	`No results found.`	Shown when nothing matches.
`clearable`	`boolean`	No	`false`	Selecting the active option again clears it.
`name`	`string`	No	`-`	Adds a hidden input for native form submission.
`variant`	`ControlVariantProp`	No	`ambient (glinr)`	Trigger look. Omit to follow the ambient design style. Glass is opt-in and also frosts the panel.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Trigger height.
`aria-describedby`	`string`	No	`-`	Auto-generated from TypeScript source.
`aria-invalid`	`boolean \| "true" \| "false"`	No	`-`	Auto-generated from TypeScript source.
`aria-label`	`string`	No	`-`	Auto-generated from TypeScript source.
`aria-labelledby`	`string`	No	`-`	Auto-generated from TypeScript source.
`className`	`string`	No	`-`	Auto-generated from TypeScript source.
`contentClassName`	`string`	No	`-`	Extra class for the popover panel.
`defaultValue`	`string`	No	`""`	Initial value for uncontrolled usage.
`disabled`	`boolean`	No	`-`	Auto-generated from TypeScript source.
`id`	`string`	No	`-`	Auto-generated from TypeScript source.
`onOpenChange`	`(open: boolean) => void`	No	`-`	Auto-generated from TypeScript source.
`open`	`boolean`	No	`-`	Controlled open state.
`value`	`string`	No	`-`	Controlled selected value.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Combobox } from "@glinui/ui"

Source Files

combobox.tsx

combobox.test.tsxtest

Dependencies

@glinui/ui@phosphor-icons/reactclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/combobox.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

ComboboxProps

`ComboboxProps`

Prop	Type	Required	Default	Description
`aria-describedby`	`string`	No	`-`	-
`aria-invalid`	`boolean \| "true" \| "false"`	No	`-`	-
`aria-label`	`string`	No	`-`	-
`aria-labelledby`	`string`	No	`-`	-
`className`	`string`	No	`-`	-
`clearable`	`boolean`	No	`false`	Allow selecting the active option again to clear it.
`contentClassName`	`string`	No	`-`	Extra class for the popover panel.
`defaultValue`	`string`	No	`""`	Initial value for uncontrolled usage.
`disabled`	`boolean`	No	`-`	-
`emptyText`	`string`	No	`"No results found."`	Message shown when no option matches.
`id`	`string`	No	`-`	-
`name`	`string`	No	`-`	Form field name; renders a hidden input with the value.
`onOpenChange`	`(open: boolean) => void`	No	`-`	-
`onValueChange`	`(value: string) => void`	No	`-`	Fires when the selection changes. Empty string means cleared.
`open`	`boolean`	No	`-`	Controlled open state.
`options`	`ComboboxOption[]`	Yes	`-`	-
`placeholder`	`string`	No	`"Select an option"`	Trigger text when nothing is selected.
`searchPlaceholder`	`string`	No	`"Search..."`	Placeholder inside the search input.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from comboboxSizeVariants.
`value`	`string`	No	`-`	Controlled selected value.
`variant`	`ControlVariantProp`	No	`-`	Trigger look. Omit to follow the ambient design style (glinr = inset well). Same vocabulary as Input.