Select

A vanilla select component with custom styling for a consistent look and feel.

Storybook

Radix UI Docs

Source

Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/select/select.tsx

import * as Lucide from 'lucide-react'
import * as React from 'react'
import { type SelectStyles, selectStyles } from './select.css'
 
interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement>, SelectStyles {}
 
const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
  ({ className, hasError, ...props }: SelectProps, forwardedRef) => {
    const styles = selectStyles({ hasError })
    return (
      <div className={styles.wrapper()}>
        <select ref={forwardedRef} className={styles.select({ className })} {...props} />
        <Lucide.ChevronDown className={styles.icon()} aria-hidden="true" strokeWidth={1.5} />
      </div>
    )
  }
)
 
Select.displayName = 'Select'
 
export { Select, type SelectProps }

Usage

Imports

import { Select } from '#/components/select'

Example

Browse the Storybook for more examples.

Anatomy

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

On this page