Autocomplete

A glass field that suggests as you type. Free text is allowed; suggestions fill it in.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/autocomplete

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

Usage#

import { Autocomplete } from "@/components/liquikit/autocomplete"

<Autocomplete.Root items={cities}>
  <Autocomplete.Input placeholder="Search cities" aria-label="City" />
  <Autocomplete.Popup empty="No city found.">
    <Autocomplete.List>
      {(city: string) => (
        <Autocomplete.Item key={city} value={city}>
          {city}
        </Autocomplete.Item>
      )}
    </Autocomplete.List>
  </Autocomplete.Popup>
</Autocomplete.Root>

Use Combobox when the value must be one of the items.

API Reference#

Autocomplete.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 autocomplete, plus className and style.

Autocomplete.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 autocomplete, plus className and style.

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 autocomplete, plus className and style.

Alert Avatar