Mantine Combobox 组件：React 下拉选择与自动完成的底层原语 | 构建自定义 UI

mantine-combobox by mantinedev/skills

101 周安装量

30 GitHub Stars

GitHub

安装命令

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

UI组件库开发 React

🇨🇳中文介绍

Mantine Combobox 技能

概述

Combobox 提供了用于构建任何类似选择 UI 的低级原语。内置的 Select、Autocomplete 和 TagsInput 组件都构建在其之上。

核心工作流程

1. 创建存储

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

2. 渲染结构

<Combobox store={combobox} onOptionSubmit={handleSubmit}>
  <Combobox.Target>
    <InputBase
      component="button"
      pointer
      rightSection={<Combobox.Chevron />}
      onClick={() => combobox.toggleDropdown()}
    >
      {value || <Input.Placeholder>选择值</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>

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

场景	使用
按钮触发器（无文本输入）	`<Combobox.Target targetType="button">`
输入触发器	`<Combobox.Target>`（默认）
徽章 + 独立输入（多选）	`<Combobox.DropdownTarget>` + `<Combobox.EventsTarget>`

🇺🇸English

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 — Full API: useCombobox options and store, all sub-component props, CSS variables, Styles API selectors
references/patterns.md — Code examples: searchable select, multi-select with pills, groups, custom rendering, clear button, form integration

Weekly Installs

101

Repository

mantinedev/skills

GitHub Stars

First Seen

Feb 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex96

gemini-cli95

amp95

kimi-cli95

github-copilot95

opencode95