mantinedev/skills3 files

Mantine Combobox

Name: Mantine Combobox
Availability: InStock
Author: mantinedev

Use this skill View repository View on skills.sh

Specification

Skill ID: mantinedev/skills/mantine-combobox
Publisher: mantinedev
Repository: skills
Installs: 0
Files: 3
Synced: Sep 23, 2026

How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

mantinedev/skills/mantine-comboboxInstalls these files

SKILL.md
references/api.md
references/patterns.md

What this skill tells the agent

Mantine Combobox Skill

Overview

Combobox provides low-level primitives for building any select-like UI. The built-in Select, Autocomplete, and TagsInput components are all built on top of it.

Core Workflow

1. Create the store

const combobox = useCombobox({
  onDropdownClose: () => combobox.resetSelectedOption(),
  onDropdownOpen: () => combobox.selectFirstOption(),
});

2. Render structure

<Combobox store={combobox} onOptionSubmit={handleSubmit}>
  <Combobox.Target>
    <InputBase
      component="button"
      pointer
      rightSection={<Combobox.Chevron />}
      onClick={() => combobox.toggleDropdown()}
    >
      {value || <Input.Placeholder>Pick value</Input.Placeholder>}
    </InputBase>
  </Combobox.Target>
  <Combobox.Dropdown>
    <Combobox.Options>
      {options.map((item) => (
        <Combobox.Option value={item} key={item}>{item}</Combobox.Option>
      ))}
    </Combobox.Options>
  </Combobox.Dropdown>
</Combobox>

3. Handle submit

const handleSubmit = (val: string) => {
  setValue(val);
  combobox.closeDropdown();
};

Target Types

Scenario	Use
Button trigger (no text input)	`<Combobox.Target targetType="button">`
Input trigger	`<Combobox.Target>` (default)
Pills + separate input (multi-select)	`<Combobox.DropdownTarget>` + `<Combobox.EventsTarget>`

References

[`references/api.md`](references/api.md) — Full API: useCombobox options and store, all sub-component props, CSS variables, Styles API selectors
[`references/patterns.md`](references/patterns.md) — Code examples: searchable select, multi-select with pills, groups, custom rendering, clear button, form integration

Use this skill in a project

Open any RiverX project, search the Skills panel for mantinedev/skills/mantine-combobox, and install it in one click.

Use this skill