Select

The Select component is a customizable dropdown menu built on top of Radix UI's Select primitive. It provides a flexible and accessible way to create select inputs with various styling options.

Features

Multiple variants (default, success, warning, error)
Left icon support
Fully accessible
Customizable styling
Animated transitions
Keyboard navigation

Variants

The Select component supports four variants:

default: Standard select with gray styling
success: Green styling for successful states
warning: Yellow styling for warning states
error: Red styling for error states

Usage

Basic Select

Select with Left Icon

Select with Groups

Disabled Select

<Row>
  <div className="space-y-2">
    <h3 className="text-sm font-medium">
      Basic Select
    </h3>
    <eU
      onValueChange={bound nn}
      value=""
    >
      <Unknown variant="default">
        <Unknown placeholder="Select 1" />
      </Unknown>
      <Unknown>
        <Unknown value="option1">
          Option 1
        </Unknown>
        <Unknown value="option2">
          Option 2
        </Unknown>
        <Unknown value="option3">
          Option 3
        </Unknown>
      </Unknown>
    </eU>
  </div>
  <div className="space-y-2">
    <h3 className="text-sm font-medium">
      Select with Left Icon
    </h3>
    <eU>
      <Unknown
        leftIcon={<Mail className="w-4 h-4" />}
        variant="default"
      >
        <Unknown placeholder="Select 1" />
      </Unknown>
      <Unknown>
        <Unknown value="personal">
          Personal Email
        </Unknown>
        <Unknown value="work">
          Work Email
        </Unknown>
      </Unknown>
    </eU>
  </div>
  <div className="space-y-2">
    <h3 className="text-sm font-medium">
      Select with Groups
    </h3>
    <eU>
      <Unknown variant="default">
        <Unknown placeholder="Select 1" />
      </Unknown>
      <Unknown>
        <Unknown>
          <Unknown>
            Fruits
          </Unknown>
          <Unknown value="apple">
            Apple
          </Unknown>
          <Unknown value="banana">
            Banana
          </Unknown>
          <Unknown value="orange">
            Orange
          </Unknown>
        </Unknown>
        <Unknown>
          <Unknown>
            Vegetables
          </Unknown>
          <Unknown value="carrot">
            Carrot
          </Unknown>
          <Unknown value="potato">
            Potato
          </Unknown>
          <Unknown value="tomato">
            Tomato
          </Unknown>
        </Unknown>
      </Unknown>
    </eU>
  </div>
  <div className="space-y-2">
    <h3 className="text-sm font-medium">
      Disabled Select
    </h3>
    <eU disabled>
      <Unknown variant="default">
        <Unknown placeholder="Disabled select" />
      </Unknown>
      <Unknown>
        <Unknown value="disabled1">
          Option 1
        </Unknown>
        <Unknown value="disabled2">
          Option 2
        </Unknown>
      </Unknown>
    </eU>
  </div>
</Row>

Variant Styles

Props

SelectTrigger

Prop	Type	Description
variant	"default" \| "success" \| "warning" \| "error"	The visual variant of the select
leftIcon	React.ReactNode	Optional icon to display on the left side
wrapperClassName	string	Additional classes for the wrapper element
className	string	Additional classes for the trigger element

SelectContent

Prop	Type	Description
position	"popper" \| "item-aligned"	The positioning strategy for the dropdown
className	string	Additional classes for the content element

SelectItem

Prop	Type	Description
value	string	The value of the select item
disabled	boolean	Whether the item is disabled
className	string	Additional classes for the item element

Accessibility

The Select component is built with accessibility in mind:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader support
Proper role attributes

Best Practices

Always provide a placeholder or default value
Use appropriate variants for different states
Group related options using SelectGroup
Add icons when they provide additional context
Use disabled state for unavailable options

Select

Basic Select

Select with Left Icon

Select with Groups

Disabled Select

On this page