Select

A customizable select component built with Radix UI primitives for creating accessible dropdown menus with multiple variants and styling options.

Overview

The Select component provides a customizable dropdown menu built on top of Radix UI's Select primitive. It's designed to create accessible, user-friendly select inputs with various styling options, multiple variants, and comprehensive accessibility features while maintaining consistency with the design system.

Usage

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Select an option" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="option1">Option 1</SelectItem>
        <SelectItem value="option2">Option 2</SelectItem>
        <SelectItem value="option3">Option 3</SelectItem>
      </SelectContent>
    </Select>
  );
}

Examples

Basic Select

A complete example showing various select patterns and configurations.

Basic Select

Select with Left Icon

Select with Groups

Disabled Select

{/* Basic Select */}
<div className="space-y-2">
  <h3 className="text-sm font-medium">Basic Select</h3>
  <Select value={value} onValueChange={setValue}>
    <SelectTrigger variant="default">
      <SelectValue placeholder="Select 1" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="option1">Option 1</SelectItem>
      <SelectItem value="option2">Option 2</SelectItem>
      <SelectItem value="option3">Option 3</SelectItem>
    </SelectContent>
  </Select>
</div>

{/* Select with Left Icon */}
<div className="space-y-2">
  <h3 className="text-sm font-medium">Select with Left Icon</h3>
  <Select>
    <SelectTrigger variant="default" leftIcon={<Envelope className="w-4 h-4" />}>
      <SelectValue placeholder="Select 1" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="personal">Personal Email</SelectItem>
      <SelectItem value="work">Work Email</SelectItem>
    </SelectContent>
  </Select>
</div>

{/* Select with Groups */}
<div className="space-y-2">
  <h3 className="text-sm font-medium">Select with Groups</h3>
  <Select>
    <SelectTrigger variant="default">
      <SelectValue placeholder="Select 1" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>Fruits</SelectLabel>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="orange">Orange</SelectItem>
      </SelectGroup>
      <SelectGroup>
        <SelectLabel>Vegetables</SelectLabel>
        <SelectItem value="carrot">Carrot</SelectItem>
        <SelectItem value="potato">Potato</SelectItem>
        <SelectItem value="tomato">Tomato</SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</div>

{/* Disabled Select */}
<div className="space-y-2">
  <h3 className="text-sm font-medium">Disabled Select</h3>
  <Select disabled>
    <SelectTrigger variant="default">
      <SelectValue placeholder="Disabled select" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="disabled1">Option 1</SelectItem>
      <SelectItem value="disabled2">Option 2</SelectItem>
    </SelectContent>
  </Select>
</div>

Variant Styles

Different visual styles for various select states.

Features

Multiple Variants: Different visual styles (default, success, warning, error) for semantic meaning
Left Icon Support: Optional icon display on the left side for enhanced visual context
Fully Accessible: Built on Radix UI primitives with comprehensive accessibility
Customizable Styling: Extensive styling options through className props
Animated Transitions: Smooth animations for open/close states
Keyboard Navigation: Full keyboard support for all interactions
Responsive Design: Adapts to different screen sizes
Dark Mode Support: Consistent appearance in light and dark themes

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

Variants

Default

Standard select with gray styling
Use for most select inputs
Balanced visual weight and accessibility

Success

Green styling for successful states
Use for validated or successful selections
Encourages positive user feedback

Warning

Yellow styling for warning states
Use for selections that need attention
Indicates potential issues

Error

Red styling for error states
Use for validation errors or failed selections
Clearly indicates problems that need resolution

Structure

The Select component is composed of several sub-components that work together:

Select - The root component that manages select state
SelectTrigger - The element that opens the select dropdown
SelectValue - Displays the selected value or placeholder
SelectContent - The dropdown container with options
SelectItem - Individual selectable options

Styling

The component includes default styling with:

Consistent spacing and typography from design system
Color-coded variants for semantic meaning
Smooth animations for open/close transitions
Dark mode support with appropriate color schemes
Focus states for accessibility
Customizable through className props

Custom Styling

You can customize the appearance using className props:

<SelectTrigger 
  variant="success"
  className="custom-select-trigger"
  wrapperClassName="custom-wrapper"
>
  <SelectValue placeholder="Custom styled select" />
</SelectTrigger>

Accessibility

The Select component is built with accessibility in mind:

Keyboard Navigation: Full keyboard support including arrow keys and Enter
ARIA Attributes: Proper ARIA labels and roles for screen readers
Focus Management: Maintains focus context during dropdown interactions
Screen Reader Support: Announces selections and state changes appropriately
High Contrast: Maintains proper contrast ratios across all variants
Semantic HTML: Uses appropriate HTML elements and roles

Select

Basic Select

Select with Left Icon

Select with Groups

Disabled Select

On this page