iconiq
—Open GitHub

Select

Animated single-select dropdown with staggered options, chevron rotation, and a check on the active row. Built to feel quick without becoming flashy.

Open in

Installation

npx shadcn@latest add @iconiq/select

Props

Option shape

3 props

Each selectable row is described by a plain object and rendered inside a portaled menu.
valuestring
Required
Stable identifier used to determine the selected option and what onChange returns.
labelstring
Required
Text shown in both the trigger and the dropdown row.
iconReactNode
Optional leading visual shown only inside the dropdown row.

Select

5 props

Animated single-select dropdown that manages open state internally but expects the selected value to come from the parent.
options{ value: string; label: string; icon?: ReactNode }[]
Required
Rows available in the dropdown menu.
valuestring
Currently selected option value. The component derives its selected label entirely from this prop.
onChange(value: string) => void
Called when a row is chosen. The menu closes immediately afterward.
placeholderstring
DefaultSelect an option…
Fallback trigger text shown when no option matches the current value.
classNamestring
Merged onto the outer wrapper so width and placement can be adjusted without editing the component source.

Notes

This implementation is effectively controlled for selection. If you call onChange without updating value, the visible selection and checkmark do not move.
The public API still does not expose disabled or native form props.