Select

Installation

Usage

// Option #1. Abstracted simplified usage:
<Select />

// Option #2. Mixed API for additional control:
<Select>
  <SelectItem>
    <SelectItemText />
    <SelectItemIndicator/>
  </SelectItem>
</Select>

// Option #3. Full Radix API for advanced customization:
<SelectRoot>
  <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>
</SelectRoot>

Basic

Custom

Provides additional control over the styling, icons and data, while still being simple to use.

Advanced

Select component fully support original Radix API. Customize anything you want.

Examples

Size

Radius

Validation

There’s an additional SelectField component built specifically for easy and clean isomorphic form validation. It leverages Conform and Zod, providing a single source of truth for both frontend and backend while preserving native browser validation APIs. It also seamlessly integrates with the latest React 19 features, such as useServerAction:

Reduce Motion

Control motion with reduceMotion prop. Additionally, Select respects user system "Reduce motion" settings.

Animation Presets

Animations work only when position set to popper.

Motion Blur

Motion

Wipe

Wipe Scale

Burst

Burst Scale

Scale

Slide Inside

Slide Outside

Custom Animation

You can use any Motion Animation values:

Learn more

Transition Presets

Each animation comes with predefined transitionPreset

Alternatively, you can choose transition from this list:

Additionaly, you can control the duration of the transition:

<Select
  animationPreset="motion"
  transitionPreset={{
    ease: "inOutExpo",
    duration: 0.6,
  }}
/>

Custom Transitions

You can use any Motion Transition values:

Learn more

API Reference

Select

Root

Support all Root Radix API.

Trigger

Support all Trigger Radix API.

Value

Support all Value Radix API.

Icon

Support all Icon Radix API.

Portal

Support all Portal Radix API.

Content

Support all Portal and Content Radix API.

Viewport

Support all Viewport Radix API.

Item

Support all Item Radix API.

ItemText

Support all ItemText Radix API.

ItemIndicator

Support all ItemIndicator Radix API.

Uses CheckIcon as default icon, but could be replaced with any custom.

Option

Abstracted Radix Item components, contains SelectItem, SelectItemText, SelectItemIndicator.

ScrollUpButton

Support all ScrollUpButton Radix API.

ScrollDownButton

Support all ScrollDownButton Radix API.

Group

Support all Group Radix API.

Label

Support all Label Radix API.

Separator

Support all Separator Radix API.

Arrow

Support all Arrow Radix API.