mantine-combobox

Name: mantine-combobox
Availability: InStock
Author: Bondery

Build accessible custom dropdowns and multi-selects with Mantine Combobox primitives.

15|Updated Dec 4, 2025

Search Tags:#ui #react #autocomplete #patterns #combobox #dropdown #mantine

Ready to run

npx skills add https://github.com/usebondery/bondery --skill mantine-combobox

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mantine-combobox
Source: https://github.com/usebondery/bondery/tree/main/.agents/skills/mantine-combobox
Command: npx skills add https://github.com/usebondery/bondery --skill mantine-combobox

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Mantine Combobox primitives enable developers to quickly build accessible, custom select-like UI components by composing low-level primitives such as Combobox, Combobox.Target, Combobox.Dropdown, and Combobox.Option.

Core Features & Use Cases

Provides low-level building blocks for creating Select, Autocomplete, and Tags-like interfaces using Mantine primitives.
Supports advanced scenarios: searchable dropdowns, multi-select pills, option grouping, custom option rendering, and form integration.
Ideal for React developers needing fine-grained control over keyboard navigation, focus management, and styling through CSS variables and the Styles API.

Quick Start

Create a Combobox store with useCombobox and wire up a Target, Dropdown, and Options as shown in the examples.

Frequently Asked Questions about mantine-combobox

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a searchable autocomplete dropdown in React using Mantine?▼

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.

Can I create a multi-select component with custom option rendering in Mantine?▼

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.

When should I use Mantine Combobox primitives instead of a standard Select component?▼

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.

Does the Mantine Combobox support CSS variables for consistent styling?▼

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.

What is the best way to manage focus and keyboard navigation in a custom React dropdown?▼

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.