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.

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

Prop	Type	Default
`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

Prop	Type	Default
`size`	`enum`	`"default"`
`radius`	`enum`	`―`
`reduceMotion`	`boolean`	`false`

Support all Root Radix API.

Trigger

Prop	Type	Default
`size`	`enum`	`"default"`
`radius`	`enum`	`―`
`placeholder`	`ReactNode`	`―`
`icon`	`ReactNode`	`―`
`invalid`	`boolean`	`―`

Support all Trigger Radix API.

Value

Support all Value Radix API.

Icon

Support all Icon Radix API.

Portal

Support all Portal Radix API.

Content

Prop	Type	Default
`size`	`enum`	`"default"`
`radius`	`enum`	`―`
`animation`	`AnimationProps`	`―`
`animationPreset`	`enum`	`―`
`transition`	`Transition`	`―`
`transitionPreset`	`enumTransitionPreset`	`―`

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.

Prop	Type	Default
`indicator`	`ReactNode`	`―`

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.