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

Trigger

Support all Radix API

Value

Support all Radix API

Icon

Support all Radix API

Portal

Support all Radix API

Content

Support all Radix API

Viewport

Support all Radix API

Item

Support all Radix API

ItemText

Support all Radix API

ItemIndicator

Support all 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 Radix API

ScrollDownButton

Support all Radix API

Group

Support all Radix API

Label

Support all Radix API

Separator

Support all Radix API

Arrow

Support all Radix API