Interaction

Click a checkbox or its label; Tab focuses and Space toggles. Each item is independent. The toolbar toggles the first item and restores it once.

States

Checked: Daily summary email; Checked: Weekly performance digest; Unchecked: Product release notes. Box 20px plus a 1.5px border, radius 8px, row gap 14px, label gap 12px, font 15px.

Timing

Fill, border and checkmark scale: 220 ms; checkmark opacity: 180 ms; delay: 0 ms; curve: cubic-bezier(0.22,1,0.36,1).

Enter and exit

Unchecked fill #ffffff, border #e3e8ee; checked fill #929292, mark #ffffff, scale 0.6 → 1 and opacity 0 → 1. Unchecking reverses the transition. Text #737373. Touch and keyboard supported.

Repeated input and interruption

Rapid toggles target the latest state without a queue. Pause, hidden pages and inactive previews freeze clocks; resume continues. Inspector defaults are saved; preview selections, focus and observation speed are transient.

Reduced motion

Transitions settle immediately. Multi-select, touch, focus rings and native disabled semantics remain. Play toggles the first item instantly without a timed return.

Default configuration

These values come from the maintained default configuration. Editor drafts and exported changes can differ.

{
  "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
  }
}

Source code and reuse

The corresponding GitHub example contains the public renderer, default configuration and runnable entry point. Read the interaction notes and preserve the included third-party and font notices when reusing it. The complete website editor is maintained separately.

Using it in your own project

Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.

Catalog provenance label: Uiverse.io · uiverse-astronaut. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.