组件 · 动作 · 05
复选框 复选框 = 18 像素的方框，有选中、未选中、半选三态，文字标签同属点击热区。
直达修改 Prompt →
✓ Ship the weekly report Notify every workspace ✓ Archive the retired prompts
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a checkbox component.
STYLE
- 18px box, 4px radius, 1px #C7C7CC border
- checked: #0071E3 fill, 12px white check mark
- indeterminate: #0071E3 fill with a 10px horizontal bar
- label 14px #1D1D1F, 8px gap, whole row is the hit target
STATES
- unchecked, checked, indeterminate, focus-visible 2px ring, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing checkboxes support a parent row.
Use:
- an indeterminate state: #0071E3 fill with a 10px horizontal bar
- the parent reflects mixed children, not a forced true
- keep box size, radius and checked colors unchanged
Only add the indeterminate state.
Create a checkbox component, replacing the existing one.
Requirements:
- 18px box, 4px radius; checked is #0071E3 with a 12px white mark
- indeterminate: #0071E3 fill with a 10px horizontal bar
- the label and box share one hit target, 8px gap
- optional 12px helper text under the label
- focus-visible 2px accent ring; disabled 40% and skipped in tab order
Keep the form layout unchanged.
MOTION
- Check: 140ms ease-out. Tick uses scale 0.6 to 1 plus opacity.
- Do not draw the tick with stroke-dashoffset; it reads as a gimmick and runs long.
- No press scale on the box itself. Error state: no shake.
- prefers-reduced-motion: instant state swap.
修改类 Prompt 只动目标，不碰页面其余部分。
复选框是什么？ 复选框收集稍后随表单提交的选项。点名方框、勾选标记，以及父级半选态。
变体 点击属性即可在预览中高亮。
单个 只能从菜单中选择一个值的下拉。
成组 在 Prompt 里写明这个类型。
半选 在 Prompt 里写明这个类型。
尺寸 给具体值，不要只给感觉词。
勾选标记 给具体值，不要只给感觉词。
标签 字段的名称文字，简短并置于输入框上方。
半选 给具体值，不要只给感觉词。
禁用 不可交互的控件，置灰且不可聚焦。 状态 点击属性即可在预览中高亮。
未选中 在 Prompt 里写明这个状态。
已选中 在 Prompt 里写明这个状态。
半选 在 Prompt 里写明这个状态。
聚焦 键盘聚焦状态：清晰的焦点环或边框变化，永远不要去掉。
禁用 不可交互的控件，置灰且不可聚焦。 结构解剖 这些是 Prompt 里应该点名的部件。
01 方框 02 勾选标记 03 标签 04 辅助文字 什么时候用 提交时才生效的多选筛选 注册表单里的条款与同意行 整组子项全选的父级行 什么时候别用 只有一个选项可为真——改用下拉或单选 改动要立刻生效——改用开关 一组超过八个选项——改用带搜索的列表 Indeterminate is a display state, not a value — the parent still resolves to checked or unchecked when the user clicks it.
复制 Prompt Create a checkbox component.
STYLE
- 18px box, 4px radius, 1px #C7C7CC border
- checked: #0071E3 fill, 12px white check mark
- indeterminate: #0071E3 fill with a 10px horizontal bar
- label 14px #1D1D1F, 8px gap, whole row is the hit target
STATES
- unchecked, checked, indeterminate, focus-visible 2px ring, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui