触发方式

点击方框或整行文字切换该项，Tab 聚焦后按空格勾选；各项独立，可多选。工具栏播放按钮演示首项切换后还原。

起点与终点

已勾选：Daily summary email；已勾选：Weekly performance digest；未勾选：Product release notes。方框 20px，边线 1.5px，圆角 8px，项间距 14px，文字间距 12px，字号 15px。

时序

填色、边线与勾号缩放 220 ms；勾号透明度 180 ms，延迟 0 ms。同一配置曲线 cubic-bezier(0.22,1,0.36,1)。

进入与退出

未选中背景 #ffffff、边线 #e3e8ee；选中填色 #929292、勾号 #ffffff，缩放 0.6 → 1、透明度 0 → 1。取消勾选反向过渡。文字色 #737373。支持触摸与键盘。

重复操作与打断

快速切换转向最新状态，不排队。暂停、隐藏页面和预览停用时冻结时钟，继续后接续。右侧默认勾选写入配置；预览内的实际勾选与焦点属于临时状态，观察倍速不写入 JSON。

减少动态效果

切换立即到位，保留多选、触摸、焦点环和禁用语义；播放按钮立即切换首项，不自动还原。

默认配置

这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。

{
  "schemaVersion": 2,
  "recipeId": "rounded-checks",
  "durationMs": 220,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "roundedChecks": {
    "items": [
      {
        "label": "Daily summary email",
        "checked": true
      },
      {
        "label": "Weekly performance digest",
        "checked": true
      },
      {
        "label": "Product release notes",
        "checked": false
      }
    ],
    "size": 20,
    "radius": 8,
    "rowGap": 14,
    "labelGap": 12,
    "fontSize": 15,
    "checkedColor": "#929292",
    "textColor": "#737373",
    "boxColor": "#ffffff",
    "borderColor": "#e3e8ee",
    "checkColor": "#ffffff",
    "disabled": false
  }
}

源码与复用

GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。

用于自己的项目

进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。

目录来源标注：Uiverse.io · uiverse-astronaut. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。