Back to Details

mantine-combobox

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Mantine Combobox Skill

Mantine Combobox 技能

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.
Combobox
提供用于构建任何类选择器UI的底层原语。内置的
Select
、
Autocomplete
和
TagsInput
组件均基于它构建。

Core Workflow

核心工作流

1. Create the store

1. 创建store

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

2. Render structure

2. 渲染结构

tsx
<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>
tsx
<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

3. 处理提交

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

Target Types

目标类型

ScenarioUse
Button trigger (no text input)
<Combobox.Target targetType="button">
Input trigger
<Combobox.Target>
(default)
Pills + separate input (multi-select)
<Combobox.DropdownTarget>
+ 
<Combobox.EventsTarget>
场景使用方式
按钮触发（无文本输入）
<Combobox.Target targetType="button">
输入框触发
<Combobox.Target>
（默认）
胶囊标签 + 独立输入框（多选）
<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
  • references/api.md
     — 完整API：
    useCombobox
    选项和store、所有子组件属性、CSS变量、Styles API选择器
  • references/patterns.md
     — 代码示例：可搜索选择器、带胶囊标签的多选组件、分组、自定义渲染、清除按钮、表单集成