mantine-combobox by mantinedev/skills
npx skills add https://github.com/mantinedev/skills --skill mantine-comboboxCombobox 提供了用于构建任何类似选择 UI 的低级原语。内置的 Select、Autocomplete 和 TagsInput 组件都构建在其之上。
const combobox = useCombobox({
onDropdownClose: () => combobox.resetSelectedOption(),
onDropdownOpen: () => combobox.selectFirstOption(),
});
<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 开发者,精准高效
const handleSubmit = (val: string) => {
setValue(val);
combobox.closeDropdown();
};
| 场景 | 使用 |
|---|---|
| 按钮触发器(无文本输入) | <Combobox.Target targetType="button"> |
| 输入触发器 | <Combobox.Target>(默认) |
| 徽章 + 独立输入(多选) | <Combobox.DropdownTarget> + <Combobox.EventsTarget> |
references/api.md — 完整 API:useCombobox 选项和存储,所有子组件属性,CSS 变量,样式 API 选择器references/patterns.md — 代码示例:可搜索选择,带徽章的多选,分组,自定义渲染,清除按钮,表单集成每周安装量
101
代码仓库
GitHub 星标数
30
首次出现
2026年2月21日
安全审计
安装于
codex96
gemini-cli95
amp95
kimi-cli95
github-copilot95
opencode95
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.
const combobox = useCombobox({
onDropdownClose: () => combobox.resetSelectedOption(),
onDropdownOpen: () => combobox.selectFirstOption(),
});
<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>
const handleSubmit = (val: string) => {
setValue(val);
combobox.closeDropdown();
};
| 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/api.md — Full API: useCombobox options and store, all sub-component props, CSS variables, Styles API selectorsreferences/patterns.md — Code examples: searchable select, multi-select with pills, groups, custom rendering, clear button, form integrationWeekly Installs
101
Repository
GitHub Stars
30
First Seen
Feb 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex96
gemini-cli95
amp95
kimi-cli95
github-copilot95
opencode95
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
116,600 周安装
WooCommerce开发专家指南:PHP最佳实践、钩子使用与安全扩展
100 周安装
Dagster Integrations 集成库指南:dbt、Fivetran、Airbyte 等数据工具连接与工作流
124 周安装
发布规划指南:AI提示工程,确保软件发布零风险与高效部署
143 周安装
通用编码最佳实践指南:DRY、KISS、SOLID原则与自动化代码质量
149 周安装
iOS Core Spotlight与NSUserActivity指南:实现Spotlight搜索、Siri预测与接力功能
143 周安装
BlitzReels API 视频编辑教程:上传、转录、剪辑、添加字幕与导出
179 周安装