Select

Single-select menu for choosing from a structured list.

Choose the next workflow step from one compact select.

Installation

npx shadcn@latest add @iconiq/r-select

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

Choose the next workflow step from one compact select.

Props

Select

6 props

Animated compound single-select with the same Iconiq trigger, row, and panel motion layered over Radix UI primitives.

valuestring

Controlled selected value. Leave unset with defaultValue for uncontrolled usage.

defaultValuestring

Initial selected value for uncontrolled usage.

onValueChange(value: string) => void

Called when a SelectItem is chosen. The menu closes immediately afterward.

openboolean

Controlled popup state. Pair with onOpenChange when parent state owns the menu.

defaultOpenboolean

Defaultfalse

Initial popup state for uncontrolled usage.

onOpenChange(open: boolean) => void

Called whenever the trigger, keyboard, item choice, or outside interaction opens or closes the menu.

Notes

The root wraps the provider primitive in the Iconiq reduced-motion config so child parts share one motion preference.

Selection and open state can be controlled or uncontrolled while still preserving primitive keyboard navigation and typeahead.

SelectTrigger

3 props

Button that opens the menu and hosts SelectValue plus the animated chevron.

childrenReactNode

Usually a SelectValue. The chevron icon is appended automatically.

size"sm" | "default"

Default"default"

Data attribute hook for compact trigger variants without changing the default Iconiq styling.

classNamestring

Merged onto the trigger button. Use it for local width such as w-full max-w-48.

Notes

The trigger keeps the previous press spring, hover color, focus ring, and chevron rotation.

SelectValue

2 props

Inline label for the current selection, with placeholder support from the underlying primitive.

placeholderReactNode

Shown in the trigger when no item is selected.

classNamestring

Merged onto the value span. The default keeps text truncated inside the trigger.

SelectContent

4 props

Portaled menu surface with the previous Iconiq dropdown fade, slide, and viewport clamping.

side"top" | "right" | "bottom" | "left"

Default"bottom"

Preferred side for the menu before collision handling.

align"start" | "center" | "end"

Default"start"

Horizontal alignment against the trigger or anchor.

sideOffsetnumber

Default8

Gap between trigger and menu. The default matches the prior select spacing.

classNamestring

Merged onto the animated menu panel for local max height, width, or surface overrides.

Notes

Uses Radix Select root, trigger, portal, content, viewport, group, label, and item primitives for focus management, typeahead, and placement.

The visible trigger press, chevron rotation, panel fade/slide, active-row highlight, and checkmark motion match the core Iconiq select component.

The popup is portaled, width-matches the trigger by default, and caps height at 320px before scrolling.

Scroll up/down arrow slots are included for long menus while the panel keeps the same entry and exit animation.

SelectItem

5 props

Selectable row with primitive keyboard behavior plus the previous active-row highlight and checkmark motion.

valuestring

Required

Stable value reported through onValueChange and used to determine the selected checkmark.

childrenReactNode

Required

Item label content. Primitive ItemText also feeds the selected trigger value.

iconReactNode

Optional leading icon rendered inline with the item label and selected trigger value.

disabledboolean

Defaultfalse

Prevents the item from receiving selection.

classNamestring

Merged onto the row while preserving the animated active highlight and selected checkmark.

ReducedMotion

1 prop

Shared motion override for the motion-enabled exports documented on this page.

reducedMotionboolean

When true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.

Notes

This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.