Select

Select is a user interface control that lets users choose a single option from a dropdown list. Triggered by a button, it displays a list of options and collapses once an option is selected, showing the chosen value.

  • Can be controlled or uncontrolled

  • Multiple variants, sizes and border radii

  • Animated using Motion

  • Two positioning modes

  • Fully managed focus, keyboard navigation

  • Handles invalid appearance

  • Easy to customize

  • Respects reduce motion via system settings and props

Pure UI

Installation

Loading...

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.

Exit animations not supported with JS, because Radix did not provided forceMount prop: https://github.com/radix-ui/primitives/issues/1893

Radix props, availiable for popper position:

  • side
  • sideOffset
  • align
  • alignOffset
  • avoidCollisions
  • collisionBoundary
  • collisionPadding
  • arrowPadding
  • sticky
  • hideWhenDetached

Motion Blur

Tip: this animation is transform-origin aware. Use align prop for additional motion precision.

Motion

Tip: this animation is transform-origin aware. Use align prop for additional motion precision.

Wipe

Wipe Scale

Burst

Burst Scale

Tip: this animation is transform-origin aware. Use align prop for additional motion precision.

Scale

Tip: this animation is transform-origin aware. Use align prop for additional motion precision.

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:

  • default
  • anticipate
  • quickOut
  • overshootOut
  • swiftOut
  • snappyOut
  • inOut
  • inQuad
  • inCubic
  • inQuart
  • inQuint
  • inExpo
  • inCirc
  • outQuad
  • outCubic
  • outQuart
  • outQuint
  • outExpo
  • outCirc
  • inOutQuad
  • inOutCubic
  • inOutQuart
  • inOutQuint
  • inOutExpo
  • inOutCirc
  • inOutBase
  • in
  • out
  • linear

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

PropTypeDefault
options*
OptionDataProps[]
―
groupedOptions*
GroupedOptionDataProps[]
―
size
enum
"default"
radius
enum
―
reduceMotion
boolean
false
indicator
ReactNode
―
animation
AnimationProps
―
animationPreset
enum
―
transition
Transition
―
transitionPreset
enumTransitionPreset
―
placeholder
ReactNode
―
icon
ReactNode
―
invalid
boolean
―

Root

PropTypeDefault
size
enum
"default"
radius
enum
―
reduceMotion
boolean
false

Support all Radix API

Trigger

PropTypeDefault
size
enum
"default"
radius
enum
―
placeholder
ReactNode
―
icon
ReactNode
―
invalid
boolean
―

Support all Radix API

Value

Support all Radix API

Icon

Support all Radix API

Portal

Support all Radix API

Content

PropTypeDefault
size
enum
"default"
radius
enum
―
animation
AnimationProps
―
animationPreset
enum
―
transition
Transition
―
transitionPreset
enumTransitionPreset
―

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.

PropTypeDefault
indicator
ReactNode
―

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

⮠ PrevScroll Area
Next ⮡Separator