Select

Displays a list of options for the user to select with a dropdown menu.

inputs

form

dropdown

selection

Preview

Variants

Basic select with a list of options.

Code

TSX

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

    export function SelectDemo() {
      return (
        <Select>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Select a fruit" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="blueberry">Blueberry</SelectItem>
            <SelectItem value="grapes">Grapes</SelectItem>
            <SelectItem value="pineapple">Pineapple</SelectItem>
          </SelectContent>
        </Select>
      )
    }

API Reference

Prop	Type	Default	Description
defaultValue	string	-	The value of the select when initially rendered.
value	string	-	The controlled value of the select.
onValueChange	function	-	Event handler called when the value changes.
disabled	boolean	false	When true, prevents the user from interacting with the select.
placeholder	string	-	The placeholder text for the select trigger.

View Full Documentation