mantine-combobox

Build a searchable autocomplete dropdown in React by composing Mantine Combobox primitives like Combobox.Target, Combobox.Dropdown, and Combobox.Option. You manage state with the useCombobox hook to control search filtering and keyboard navigation.

You can create a multi-select component with custom option rendering using Mantine Combobox. The primitives provide fine-grained control over the DOM, allowing bespoke option layouts and multi-select pills within your React application.

Use Mantine Combobox primitives when you need fine-grained control over keyboard navigation, focus management, or custom styling beyond standard Select components. They provide low-level building blocks for complex interfaces like tags or grouped options.

The Mantine Combobox supports CSS variables and the Styles API for consistent styling. You can apply these across forms and dashboards to ensure custom dropdowns match your application's design system.

The best way to manage focus and keyboard navigation in a custom React dropdown is using the useCombobox hook. It wires up accessible state management for Mantine Combobox sub-components automatically.