Select

Preview

Installation

npx shadcn@latest add @cubby-ui/select

Usage

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

<Select>
  <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.

With Scroll Arrows

Add scroll arrows for navigation through options.

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.

Custom Props

SelectValue

SelectTrigger

SelectContent

Modified Defaults

Our implementation changes the following Base UI prop default:

• SelectContent: sideOffset defaults to 6 (Base UI defaults to 0)