Combobox

A glass field with a list that buds off it and reshapes as you type.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/combobox

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { Combobox } from "@/components/liquikit/combobox"

<Combobox.Root items={fruits}>
  <Combobox.Input placeholder="Choose a fruit" aria-label="Fruit" />
  <Combobox.Popup empty="No fruit found.">
    <Combobox.List>
      {(fruit: string) => (
        <Combobox.Item key={fruit} value={fruit}>
          {fruit}
        </Combobox.Item>
      )}
    </Combobox.List>
  </Combobox.Popup>
</Combobox.Root>

Examples#

Multiple#

Pass multiple to Combobox.Root and use Combobox.Chips in place of the input. Chosen items sit in the field as chips. Remove one with its cross, or with Backspace from the start of the field.

API Reference#

Combobox.Root

Prop	Type	Default
`open`	`boolean` Whether the popup is open. Pair it with `onOpenChange` to control it.	—

Also takes every prop of Base UI's combobox, plus className and style.

Combobox.Input

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"

Also takes every prop of Base UI's combobox, plus className and style.

Combobox.Chips

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`placeholder`	`string` Shown while nothing is chosen.	—
`chipLabel`	`(item: unknown) => ReactNode` Renders the label inside each chip. Defaults to the item, or its `label`.	labelOf
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"
`aria-label`	`string` An accessible name, for controls without a visible label.	—

Prop	Type	Default
`empty`	`ReactNode` Shown in the list when nothing matches.	—
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"
`children`	`ReactNode` The content.	—

Also takes every prop of Base UI's combobox, plus className and style.

Checkbox Context Menu