Select

Preview

Installation

npx shadcn@latest add @cubby-ui/select

Usage

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

<Select>
  <SelectLabel />
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent />
</Select>

Examples

Controlled

Manage select state externally.

With Groups

Organize options into labeled groups.

With Icons

Add icons to select options for visual context.

Multiple Selection

Select multiple options from the list.

With Scroll

Handle long lists with scrollable content.

Align Item with Trigger

Align selected item with trigger position.

Object Values

Use objects as values instead of primitives. The itemToStringValue prop converts objects to strings for form submission.

API Reference

The Select component is built on top of Base UI's Select. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Select documentation.

Props

SelectLabel

Accessible label for the select trigger. Wraps Base UI's Select.Label. Renders a <div> — clicking it focuses the trigger without opening the popup.

SelectTrigger

Button that opens the dropdown when clicked. Wraps Base UI's Select.Trigger.

SelectContent

Dropdown container for the option list with positioning. Composes Base UI's Select.Positioner and Select.Popup. Props are forwarded to Select.Popup.