Select
Enhanced select dropdown component with advanced variants, icon support, state management, and smooth animations.
Pro features
What the Pro version adds to this component.
Built-in Search
Toggle enableSearch on SelectContent to filter options in real time, with a custom placeholder and search icon
Item Descriptions
Add a description to any SelectItem to render secondary helper text under the option label
Clearable Selection
clearable and onClear render an inline button to reset the current value instantly
Hover Animations
enableHoverScale adds a subtle scale-and-shift micro-interaction as items are hovered
Loading States
Show spinners with loading on the trigger and searchLoading on the content while data resolves
Empty-State Handling
noResultsText is shown automatically when a search query matches no options
Installation
Install via CLI
npx @moontra/moonui-cli add selectUsage
Basic Usage
Pro Usage
Examples
In a Form
Select rarely stands alone — here it sits in a labelled form row next to an Input, sharing the same width, spacing and submit flow
Basic Select
A single-choice select built on Radix — the trigger shows the current value and the list is keyboard navigable
Select with Icons
Icons inside items help scanning when the labels alone are ambiguous
Grouped Options
SelectGroup with a label splits a long list into meaningful sections
Disabled State
Disabling the whole select, or individual items, while keeping the current value visible
Enhanced Select with Search
Pro version includes search, descriptions, animations and more
Advanced Select Features
Grouped options with icons and advanced states