Skip to content
Cuelark UI
FormsAnimated

Select

Dropdown select with grouped options and a cascading open.

A select picks one option from a list. Cuelark's select is built on Radix for full keyboard support and typeahead; it opens with a spring from the trigger, the first options cascade in, and the chevron flips while open.

Preview

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/select.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/select.

Builds on: motion

Usage

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

<Select>
  <SelectTrigger><SelectValue placeholder="Theme" /></SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
  </SelectContent>
</Select>

Motion

How it moves

The panel springs from the trigger (popIn) and the first eight options cascade in with a 20ms stagger.

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

Select

Extends Radix Select.Root (value, defaultValue, onValueChange, name, required).

SelectTrigger

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Height follows --cl-density.

SelectContent

PropTypeDefaultDescription
position"popper" | "item-aligned""popper"Below the trigger, or aligned to the selected item.

SelectItem · SelectGroup · SelectLabel · SelectSeparator

Accessibility

  • Typeahead jumps to options as you type.
  • Arrow keys, Home and End move; Enter or Space selects.
  • Works in native forms via a hidden select.

FAQ

Also searched as: react select · shadcn select · select dropdown · custom select component · radix select