UI

Select

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

'use client'

import { useState } from 'react'
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
  SelectSeparator,
} from '../ui/select'

export default function SelectDemo() {
  const [selectVal, setSelectVal] = useState('')

  return (
    <Select onValueChange={setSelectVal}>
      <SelectTrigger hasIcon className='w-[275px]' variant='default'>
        <SelectValue placeholder='Select a position...' />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Design/UX</SelectLabel>
          <SelectItem value='Director, UX - Platform'>
            Director, UX - Platform
          </SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Engineering</SelectLabel>
          <SelectItem value='Cloud SRE Senior Director'>
            Cloud SRE Senior Director
          </SelectItem>
          <SelectItem value='Senior Software Engineer'>
            Senior Software Engineer
          </SelectItem>
          <SelectItem value='Senior Manager - Security Architecture'>
            Senior Manager
          </SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Marketing</SelectLabel>
          <SelectItem value='Director, PR & Communications'>
            Director, PR & Communications
          </SelectItem>
          <SelectItem value='Sr. Design Engineer'>
            Sr. Design Engineer
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

Installation

Install the following dependencies:

npm install @radix-ui/react-select

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Anatomy

Import all parts and piece them together.

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
  SelectSeparator,
} from './ui/Select'

<Select>
  <SelectTrigger>
    <SelectValue />
    <SelectIcon />
  </SelectTrigger>

  <SelectPortal>
    <SelectContent>
      <SelectScrollUpButton />
      <SelectViewport>
        <SelectItem>
          <SelectItemText />
          <SelectItemIndicator />
        </SelectItem>

        <SelectGroup>
          <SelectLabel />
          <SelectItem>
            <SelectItemText />
            <SelectItemIndicator />
          </SelectItem>
        </SelectGroup>

        <SelectSeparator />
      </SelectViewport>
      <SelectScrollDownButton />
      <SelectArrow />
    </SelectContent>
  </SelectPortal>

</Select>