iconiq
—Open GitHub

Select

Single-select menu for choosing from a structured list.

Installation

npx shadcn@latest add @iconiq/r-select

Props

Select

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

Default false

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.

The root wraps the provider primitive in the Iconiq motion layer so child parts share one animation setup.

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

SelectTrigger

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.

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

SelectValue

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

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

Default 8

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.

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

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

Default false

Prevents the item from receiving selection.
classNamestring
Merged onto the row while preserving the animated active highlight and selected checkmark.

SelectGroup

Section wrapper for grouped options inside SelectContent.

childrenReactNode

Required

SelectItem rows or nested option content rendered inside the grouped section.
classNamestring
Merged with the default grouped section spacing classes.

SelectGroup adds the same section spacing as the previous grouped option renderer.

SelectLabel

Compact section label rendered above grouped SelectItem rows.

childrenReactNode

Required

Section label text rendered above a SelectGroup.
classNamestring
Merged with the uppercase section label typography classes.

SelectLabel keeps the compact uppercase section label treatment.

SelectSeparator

Non-interactive divider between item clusters inside the menu.

classNamestring
Merged with the default border-token divider classes.

SelectSeparator renders a non-interactive border-token divider between item clusters.

SelectScrollUpButton

Scroll affordance rendered above long SelectContent lists.

classNamestring
Merged with the default scroll button layout classes.

SelectScrollDownButton

Scroll affordance rendered below long SelectContent lists.

classNamestring
Merged with the default scroll button layout classes.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-select, motion, lucide-react.

Installs compound Radix select parts with the same exported part names as the Base UI version.

Keeps grouped sections, trigger width matching, keyboard typeahead, and the same trigger and dropdown motion as the prior select component.

The generated registry file is /r/r-select.json.