Free and open-source React multi select components built for modern applications and websites. These multi select components are built using React Aria and styled with Tailwind CSS.
The multi-select supports three sizes: "sm" , "md" , and "lg" . The default size is "md" .
You can disable the multi-select by setting the isDisabled prop to true .
Pass an onSelectAll callback to add a "Select all" action, and an onReset callback to add a "Reset" action. These appear as buttons in the dropdown footer. To hide the footer entirely, set showFooter={false} .
Use the supportingText prop to show additional context next to the selected items count, such as "12 users" .
Set showSearch={false} to remove the search input from the popover. Use emptyStateTitle and emptyStateDescription to customize the empty state shown when the listbox has no items (no search results, or an empty items array).
Pass a selectedCountFormatter function — it receives the selected count and returns a ReactNode . Useful for pluralization or showing the selected items inline instead of just a number.
Pass selectedKeys and onSelectionChange for controlled state, or defaultSelectedKeys for uncontrolled. The selection value is a React Aria Selection — either a Set of item ids or the literal string "all" .
Yes. The multi-select is built on React Aria Components, which provides full keyboard navigation, screen reader support, and ARIA attributes out of the box.