# Mantine 组合框技能 ## 概述 “Combobox”提供了用于构建任何类似选择的 UI 的低级原语。内置的“Select”、“Autocomplete”和“TagsInput”组件都构建在它之上。 ## 核心工作流程 ### 1\.创建商店 const 组合框 = useCombobox({ onDropdownClose: () =>combobox.resetSelectedOption(), onDropdownOpen: () =>combobox.selectFirstOption(), }); ### 2\.渲染结构 <组合框.目标> <输入库组件=“按钮” 指针 rightSection={} onClick={() =>combobox.toggleDropdown()} > {值|| 选择值} <组合框.下拉> <组合框.选项> {选项.map((项目) => ( {item} ))} ### 3\.处理提交 const handleSubmit = (val: string) => { 设置值（val）；组合框.closeDropdown(); }; ## 目标类型场景 |使用 ---|--- 按钮触发（无文本输入）| `` 输入触发| ``（默认）药丸+单独输入（多选）| `` \+ `` ## 参考文献 * **[`references/api.md`]()** — 完整 API：`useCombobox` 选项和存储、所有子组件 props、CSS 变量、Styles API 选择器 * **[`references/patterns.md`]()** - 代码示例：可搜索选择、药丸多选、组、自定义渲染、清除按钮、表单集成

曼廷组合框

包含技能