Mantine Combobox
Implement Mantine Combobox dropdowns with correct useCombobox keyboard navigation, controlled open state, and sub-component composition in React apps.
Overview
Mantine Combobox is an agent skill for the Build phase that supplies the official useCombobox hook and Combobox sub-component API reference for React UIs.
Install
npx skills add https://github.com/mantinedev/skills --skill mantine-comboboxWhat is this skill?
- useCombobox options: defaultOpened, controlled opened, onOpenedChange, loop, scrollBehavior
- Store API: open/close/toggle dropdown, select next/previous option, focusSearchInput
- Combobox root and documented sub-components with Styles API hooks
- Keyboard vs mouse eventSource on dropdown open/close callbacks
- Table of contents: hook, root, sub-components, CSS variables
Adoption & trust: 1.1k installs on skills.sh; 48 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a Mantine autocomplete or select and keep miswiring dropdown state, keyboard navigation, or sub-component structure.
Who is it for?
Indie SaaS or internal tools on React + Mantine that need accessible combobox behavior with keyboard loop and controlled dropdown state.
Skip if: Projects on other UI kits, native mobile-only stacks, or backends with no Mantine frontend.
When should I use this skill?
Implementing or debugging Mantine Combobox and useCombobox behavior in React.
What do I get? / Deliverables
You implement Combobox UIs that match Mantine’s store methods, event sources, and Styles API without trial-and-error from outdated examples.
- Correct Combobox JSX structure
- Hook configuration matching UseComboboxOptions
Recommended Skills
Journey fit
Combobox UI wiring is core Build work when you are assembling searchable selects and autocomplete patterns in the product shell. Frontend subphase matches Mantine component API reference for React surfaces—not backend or agent tooling.
How it compares
Component API reference for Mantine—not a generic shadcn or Radix combobox recipe.
Common Questions / FAQ
Who is mantine-combobox for?
Solo builders and small teams shipping React apps with Mantine who want agent help that follows the real Combobox and useCombobox contracts.
When should I use mantine-combobox?
Use it during Build frontend work when adding searchable selects, multi-step pickers, or keyboard-driven dropdowns in Mantine.
Is mantine-combobox safe to install?
It is documentation-only; confirm compatibility with your Mantine version and review the Security Audits panel on this page before trusting third-party skill sources.
SKILL.md
READMESKILL.md - Mantine Combobox
# Combobox API Reference ## Table of Contents - [useCombobox hook](#usecombobox-hook) - [Combobox (root)](#combobox-root) - [Sub-components](#sub-components) - [CSS variables & Styles API](#css-variables--styles-api) --- ## useCombobox hook ```tsx const combobox = useCombobox(options?: UseComboboxOptions); ``` **Options:** ```ts interface UseComboboxOptions { defaultOpened?: boolean; opened?: boolean; onOpenedChange?: (opened: boolean) => void; onDropdownClose?: (eventSource: 'keyboard' | 'mouse' | 'unknown') => void; onDropdownOpen?: (eventSource: 'keyboard' | 'mouse' | 'unknown') => void; loop?: boolean; // Default: true — keyboard nav wraps at boundaries scrollBehavior?: ScrollBehavior; // Default: 'instant' } ``` **Returned store:** ```ts interface ComboboxStore { // Dropdown state dropdownOpened: boolean; openDropdown(eventSource?: 'keyboard' | 'mouse' | 'unknown'): void; closeDropdown(eventSource?: 'keyboard' | 'mouse' | 'unknown'): void; toggleDropdown(eventSource?: 'keyboard' | 'mouse' | 'unknown'): void; // Option keyboard navigation selectActiveOption(): string | null; selectFirstOption(): string | null; selectNextOption(): string | null; selectPreviousOption(): string | null; resetSelectedOption(): void; clickSelectedOption(): void; updateSelectedOptionIndex( target?: 'active' | 'selected' | number, options?: { scrollIntoView?: boolean } ): void; // Programmatic focus focusSearchInput(): void; focusTarget(): void; } ``` --- ## Combobox (root) ```tsx <Combobox store={combobox} // required — ComboboxStore from useCombobox() onOptionSubmit={fn} // (value: string, optionProps) => void size="sm" // MantineSize | string, default: 'sm' dropdownPadding={4} // number, default: 4 resetSelectionOnOptionHover // boolean readOnly // boolean — disables all interactions // + all Popover props (position, offset, width, withinPortal, etc.) /> ``` --- ## Sub-components ### Combobox.Target ```tsx <Combobox.Target targetType="input" // 'button' | 'input', default: 'input' withKeyboardNavigation // boolean, default: true withAriaAttributes // boolean, default: true withExpandedAttribute // boolean, default: false autoComplete="off" // string > {/* single child — the trigger element */} </Combobox.Target> ``` Use `targetType="button"` when the trigger is a button (Space key toggles dropdown). ### Combobox.DropdownTarget Marks the element used for dropdown positioning when separate from the keyboard events target. Used together with `Combobox.EventsTarget` in multi-select/pills patterns. ### Combobox.EventsTarget Receives keyboard events for dropdown navigation. Used alongside `Combobox.DropdownTarget` when the typing input is nested inside the trigger (e.g. inside `PillsInput`). ### Combobox.Dropdown ```tsx <Combobox.Dropdown hidden={false}> {/* dropdown content */} </Combobox.Dropdown> ``` Use `hidden` to hide without unmounting (preserves scroll position). ### Combobox.Options ```tsx <Combobox.Options labelledBy="some-label-id"> {/* Combobox.Option or Combobox.Group elements */} </Combobox.Options> ``` ### Combobox.Option ```tsx <Combobox.Option value="react" // string | number, required active={false} // visually marks as selected; used by selectActiveOption() disabled={false} > React </Combobox.Option> ``` ### Combobox.Search Built-in search input, wired to keyboard navigation. Renders sticky at top of dropdown. ```tsx <Combobox.Search value={search} onChange={(e) => setSearch(e.currentTarget.value)} placeholder="Search..." withAriaAttributes // boolean, default: true withKeyboardNavigation // boolean, default: true // + all Input props /> ``` ### Combobox.Empty ```tsx <Combobox.Empty>Nothing found</Combobox.Empty> ``` ### Combobox.Group ```tsx <Combobox.Group label=