81 Pro components and page blocks

Get Pro
uibrik

Combobox

Pro

Preview

Customize

Options
Below

Installation

Pro

Combobox is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/combobox

Usage

import { Combobox } from "@/components/uibrik/combobox/combobox";​<Combobox  multiple={false}  autocomplete  side="bottom"  disabled={false}  defaultValue={[]}  onSearch={(query, signal) => {}}  onCreate={(query) => {}}  // options={[{ value: …, label: … }]}  // value="…"  // onChange={(value) => {}}  // placeholder="…"  // emptyText="…"  // open={false}  // onOpenChange={(open) => {}}  // label="…"  // panelClassName="…"/>

Props

Combobox
multiple
Type boolean
false
Pick several. Picks gather as chips before the caret.
autocomplete
Type boolean
true
Complete the best match inline. Tab or → takes it.
debounce
Type number
200
Wait after typing before onSearch runs.
side
Type "bottom" | "top"
"bottom"
Preferred side. Flips when there isn't room.
disabled
Type boolean
false
Grey the field out and ignore input.
options
Type { value; label; description?; icon?; group?; disabled? }[]
–
Options to filter, or suggestions for an empty query when onSearch is set.
onSearch
Type (query, signal: AbortSignal) => Promise<option[]>
–
Load results for a query. Older requests are aborted.
onCreate
Type (query) => option | Promise<option>
–
Turn a query that matches nothing into a new option.
value / onChange
Type string | null / (value) => void, or string[] with multiple
–
Controlled selection.
defaultValue
Type string | string[]
–
Selection on mount when uncontrolled.
placeholder / emptyText
Type string
–
Field placeholder, and what shows when nothing matches.
open / onOpenChange
Type boolean / (open) => void
–
Controlled open state.
label
Type string
–
Names the field for screen readers.
className / panelClassName
Type string
–
Classes for the field and the list panel.