Select

Choose from an expanding pill with a gliding highlight, keyboard navigation, and a morphing label.

Install with the shadcn CLI

npxnpx shadcn@4.21.5 add @cavemio/select

First install? Configure @cavemio once

Run npx shadcn@4.21.5 init if shadcn is not set up, then merge this entry into the registries field in your existing components.json. Keep your other settings and registries.

components.json

{
  "registries": {
    "@cavemio": "https://registry.cavemio.dev/r/cavemio-{name}.json"
  }
}

Overview

Choose from an expanding pill with a gliding highlight, keyboard navigation, and a morphing label.

Try choosing a plan, typing to find a language, and scrolling the long list.

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

<Select label="Plan" options={[{ value: "personal", label: "Personal" }, { value: "team", label: "Team" }]} defaultValue="personal" />

Props

Prop	Type	Description
`options`	`SelectOption[]`	Choices with unique value, label, and optional description.
`label`	`string`	Visible label and accessible name.
`value`	`string \| null`	Controlled selection; use onValueChange to update it.
`defaultValue`	`string \| null`	Initial uncontrolled selection.
`onValueChange`	`(value: string) => void`	Called when a different option is selected.
`hint / error`	`ReactNode`	Supporting text or validation feedback linked to the control.
`disabled`	`boolean`	Prevents opening and selection.
`hideLabel`	`boolean`	Visually hides the label while retaining its accessible name.
`block`	`boolean`	Fill available width; defaults to true. Compact pills morph their label.
`size`	`"sm" \| "md"`	Compact toolbar or regular field height.
`align / width`	`"start" \| "end" / number`	Popup alignment and preferred width, constrained to viewport.
`display / renderValue`	`function`	Customize selected text or render an icon/value.
`className`	`string`	Styles the field wrapper.