Select

Displays a list of options for the user to pick from, triggered by a button.

<Select defaultValue="apple">
  <SelectTrigger className="w-full max-w-sm">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="blueberry">Blueberry</SelectItem>
  </SelectContent>
</Select>

Installation

pnpm dlx cubix@latest add select --base radix

Usage

Import

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

Example

<Select defaultValue="apple">
  <SelectTrigger className="w-full max-w-sm">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="blueberry">Blueberry</SelectItem>
  </SelectContent>
</Select>

Examples

With label and helper text

Framework

Choose the framework for your project.

<div className="grid w-full max-w-sm gap-2">
  <label htmlFor="framework" className="text-sm font-medium">Framework</label>
  <Select defaultValue="next">
    <SelectTrigger id="framework" className="w-full">
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="next">Next.js</SelectItem>
      <SelectItem value="vite">Vite</SelectItem>
      <SelectItem value="astro">Astro</SelectItem>
    </SelectContent>
  </Select>
  <p className="text-sm text-muted-foreground">Choose the framework for your project.</p>
</div>

Invalid state

Set aria-invalid to switch to destructive border and ring styles.

<Select defaultValue="admin">
  <SelectTrigger aria-invalid className="w-full max-w-sm">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="admin">Admin</SelectItem>
    <SelectItem value="member">Member</SelectItem>
  </SelectContent>
</Select>

Disabled

<Select defaultValue="disabled" disabled>
  <SelectTrigger className="w-full max-w-sm">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="disabled">Disabled</SelectItem>
  </SelectContent>
</Select>

In a form

<form className="grid w-full max-w-sm gap-3">
  <Select name="plan" defaultValue="pro">
    <SelectTrigger className="w-full">
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="free">Free</SelectItem>
      <SelectItem value="pro">Pro</SelectItem>
      <SelectItem value="team">Team</SelectItem>
    </SelectContent>
  </Select>
  <Button type="submit">Save plan</Button>
</form>

API Reference

Note: The select is a composed control. Put items in SelectContent and size the trigger with className.

Props

Prop	Type	Default	Description
value	string	-	Controlled selected value. Use with `onValueChange`.
defaultValue	string	-	Default selected value for uncontrolled usage.
disabled	boolean	false	Disables the select and prevents interaction.
name	string	-	Name submitted with the parent form.
children	React.ReactNode	-	SelectTrigger, SelectContent, and SelectItem parts of the control.