Free and open-source React select components built for modern applications and websites. These select components are built using React Aria and styled with Tailwind CSS.
The select supports three sizes: "sm" , "md" , and "lg" . The default size is "sm" .
You can disable the select by setting the isDisabled prop to true .
Yes. Use the Select.ComboBox compound component instead of Select to enable search/filtering of options.
Pass icon for a leading icon or avatarUrl for a leading avatar on Select.Item . You can also pass icon on the Select component itself to show an icon in the trigger.
Yes. The select is built on React Aria Components, which provides full keyboard navigation, screen reader support, and ARIA attributes out of the box.
Exactly the label text — not the label plus the current value. If you need the current value announced too, add it to your own aria-label or read it from the visible trigger content.
Yes, by default the accessible textValue used for typeahead is `label + " " + supportingText` when supportingText is set. Pass your own `textValue` on Select.Item to override this.
userEvent.click alone toggles it open then shut in the same interaction. Use fireEvent.click(trigger), or focus the trigger and press ArrowDown. See the Testing page for the full recipe.
Pass menuTrigger ("focus" by default, or "input" / "manual") to control when the popover opens. ComboBox still applies React Aria's own `contains` filter on top of whatever items you pass in — pass defaultFilter={() => true} to disable it and rely entirely on app-side filtering. allowsEmptyCollection keeps the popover open (showing an empty state) instead of closing it when nothing matches.
Yes, NativeSelect renders a real <select> element (styled to match) instead of a listbox popover. It honours a caller-supplied id (falling back to a generated one), accepts a readonly options array, and renders an optional placeholder as a disabled first option.