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

Installation

Usage

Basic

Custom

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

Advanced

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

Examples

Size

Radius

Validation

There’s an additional 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 :

Reduce Motion

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

Animation Presets

Animations work only when position set to .

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

Radix props, availiable for position:

Motion Blur

Tip: this animation is aware. Use prop for additional motion precision.

Motion

Tip: this animation is aware. Use prop for additional motion precision.

Wipe

Wipe Scale

Burst

Burst Scale

Tip: this animation is aware. Use prop for additional motion precision.

Scale

Tip: this animation is aware. Use prop for additional motion precision.

Slide Inside

Slide Outside

Custom Animation

You can use any Motion values:

Learn more

Transition Presets

Each animation comes with predefined

Alternatively, you can choose transition from this list:

Additionaly, you can control the duration of the transition:

Custom Transitions

You can use any Motion 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 Radix API

Trigger

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

Prop	Type	Default
`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 as default icon, but could be replaced with any custom.

Option

Abstracted Radix Item components, contains , , .

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