52 Pro components and page blocks

Get Pro
uibrik

Select

Pro

Preview

Customize

Below

Usage

import { Select } from "@/components/uibrik/select/select";

<Select options={options} />

Installation

Pro

Select 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/select

Props

Select
searchable
Type boolean
true
A search box at the top of the list.
multiple
Type boolean
false
Pick several. Picks gather as chips in the field and the list stays open.
side
Type "bottom" | "top"
"bottom"
Preferred side. Flips when there isn't room.
disabled
Type boolean
false
Grey the field out and ignore input.
optionsrequired
Type { value; label; description?; icon?; group?; disabled? }[]
–
Options in order. Ones sharing a group are listed under it.
value / onChange
Type string / (value) => void, or string[] with multiple
–
Controlled selection.
defaultValue
Type string | string[]
–
Selection on mount when uncontrolled.
placeholder
Type string
"Select…"
Shown while nothing is picked.
searchPlaceholder / emptyText
Type string
–
The search box's placeholder, and what shows when nothing matches.
maxChips
Type number
3
With multiple: chips shown before the rest collapse into +n.
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 for the list panel.