复选框

checkbox() 渲染出一个 <label>，里面包着真正的 <input type="checkbox"> 和你看到的那个小方框。input 在视觉上被藏起来，但依然存在：能聚焦、会随表单提交，整个标签都是点击区域——勾选标记直接由 input 自己的 :checked 状态画出来，全程没有脚本。

基础复选框

通过邮件告知我更新已勾选

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: '通过邮件告知我更新', name: 'updates' }),
  checkbox({ label: '已勾选', name: 'checked', checked: true }),
)

颜色

stack({ direction: 'row', gap: 'lg', wrap: true },
  checkbox({ label: 'Primary', checked: true, color: 'primary' }),
  checkbox({ label: 'Neutral', checked: true, color: 'neutral' }),
  checkbox({ label: 'Success', checked: true, color: 'success' }),
  checkbox({ label: 'Warning', checked: true, color: 'warning' }),
  checkbox({ label: 'Danger', checked: true, color: 'danger' }),
)

禁用

不可用已开启并锁定

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: '不可用', disabled: true }),
  checkbox({ label: '已开启并锁定', checked: true, disabled: true }),
)

长标签

方框会与第一行文字对齐，而不是相对整段文字居中。

每次构建后都跑一遍 Lighthouse 审计，任一分数低于阈值时让构建失败。

checkbox({
  label: '每次构建后都跑一遍 Lighthouse 审计，任一分数低于阈值时让构建失败。',
  name: 'lighthouse',
  checked: true,
})

分组

choiceGroup() 会由数据生成一组复选框，共用一个图例和 name。给 value 传数组即可勾选多项。

生成

sitemap.xmlrss.xmlPagefind 索引

每一项都会在构建结束时写入 dist/。

choiceGroup({
  legend: '生成',
  name: 'generate',
  type: 'checkbox',
  value: ['sitemap', 'rss'],
  options: [
    { value: 'sitemap', label: 'sitemap.xml' },
    { value: 'rss', label: 'rss.xml' },
    { value: 'pagefind', label: 'Pagefind 索引' },
  ],
  help: '每一项都会在构建结束时写入 dist/。',
})

横向排列

类别

performanceaccessibilityseo

choiceGroup({
  legend: '类别',
  name: 'categories',
  type: 'checkbox',
  direction: 'row',
  value: ['performance'],
  options: ['performance', 'accessibility', 'seo'],
})

搭配 field

单个复选框上面通常不需要再加一层标签。当一整组确实需要时，field() 会给它和文本框一样的标签、帮助文本和错误处理。

条款我接受这些条款

需要接受条款才能继续。

field({ label: '条款', error: '需要接受条款才能继续。' },
  checkbox({ label: '我接受这些条款', name: 'terms', color: 'danger' }),
)

属性

属性	类型	默认值	说明
`label`	`Child`	—	方框旁边的文字。想要光秃秃的控件就省略它。
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	勾选时的颜色。
`checked`	`boolean`	`false`	是否一开始就勾选。
`name`	`string`	—	表单字段名。
`value`	`string \| number`	—	勾选时提交的值。
`disabled`	`boolean`	`false`	禁用 input 并让标签变淡。

其余属性都会落到 <input> 上，而不是标签上——所以 required、onchange 和 data-* 都去到你预期的地方。要给标签本身加样式，请用 class。

由数据生成的一整组，请看单选组页面上的 choiceGroup()——两种情况下它接受同样的选项，靠 type: 'checkbox' 切换。