caliper uidocs
DemoSign inGet Pro

Select

Free

A styled native select for choosing one option from a short list.

Installs components/ui/select.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/select.json

When to use #

Use it for

  • Five to fifteen fixed options such as a region or a unit.
  • Forms where native pickers on phones are an advantage.

Skip it when

  • Options need search or grouping; use a combobox.
  • Two to five options; a segmented control is faster.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/select.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { Label } from "@/components/ui/label"
import { Select } from "@/components/ui/select"

export function RegionSelect() {
  return (
    <div className="grid w-full max-w-xs gap-1.5">
      <Label htmlFor="docs-region">Primary region</Label>
      <Select id="docs-region" name="region" defaultValue="eu-central-1">
        <option value="eu-central-1">Frankfurt · eu-central-1</option>
        <option value="eu-west-1">Dublin · eu-west-1</option>
        <option value="us-east-1">Ashburn · us-east-1</option>
        <option value="ap-northeast-1">Tokyo · ap-northeast-1</option>
      </Select>
    </div>
  );
}

API reference #

Select

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It is built on native elements, so roles and focus come from the browser.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.