Select

Docs

Select

Select component displays a list of options for the user to pick from, typically triggered by a button or a clickable area. It provides a dropdown menu that allows users to make a single selection from a set of predefined options. The Select component is commonly used in forms and user interfaces where users need to choose one option from a list. It enhances the user experience by providing a clean and organized way to present and interact with a variety of choices.

Radix UI NPM

Installation

yarn add @camped-ui/select

Usage

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

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>

Examples

Scrollable

Form

Scroll Area Separator