Chip
标签
WebMobileDesktop上手难度: 中等
一个小圆角的胶囊，里面放几个字，可以选中也可以只是显示。
Live Demo
真的可以点筛选：人像
你刚才看到的这个：小红书话题标签、GitHub 的 label、搜索页上方的筛选胶囊、输入框里已经选好的「关键词 ✕」。
它到底是什么
Chip 有两种截然不同的用法，容易混：Input Chip 是可点的（可筛选、可选、可删除），Display Chip 是只读的标签（分类、状态）。UI 里看到胶囊，先判断它能不能点。
标签chiptag标签片胶囊pillfilter chip
Anatomy · 它由什么组成
Container胶囊体
全圆角，padding 6px 12px
Label文字
12–14px
Selected选中态
填充主色或加勾
Remove删除
输入场景的 ✕
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 多选筛选（可同时激活多个条件） | 用 |
| 展示内容的分类或状态 | 用 |
| 输入框里展示已选标签，可删除 | 用 |
| 表示一个主要操作 | 不用 |
| 代替按钮做页面跳转 | 不用 |
Chip 不带关闭按钮时无法取消，用户会困在筛选里——可筛选的 Chip 必须可取消。
不要用 Chip 堆太多可选项，它会挤成一片让人不知道点哪。
Similar Patterns
别搞混一句话区分：一个小圆角的胶囊，里面放几个字，可以选中也可以只是显示。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一组可筛选的 Chip：全部 / 人像 / 风景 / 夜景，可多选，选中态填充主色，筛选结果实时更新。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加几个标签。
改成这样说
加一组可筛选 Chip（可多选）：未选浅灰底、选中深色填充并同步 aria-checked，再点一次可取消，筛选结果实时更新。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。