Forms & inputs
Checkbox
Checkmark draws itself, then settles
detent-checkbox
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 3
- Wave
- phase-3-forms
- Group
- Forms & inputs
4.3 KB gzip for the class module
Variants
Recorded states
disabledrecorded state; no settercheckedrecorded state; no setterindeterminaterecorded state; no setter
Usage
Import
import '/components/checkbox/define.js';
// or register it yourself
import { DetentCheckbox } from '/components/checkbox/checkbox.js';Attributes
checkeddefault-checkeddescriptiondisabledindeterminatenamerequiredvalue
Properties
checkeddefaultCheckedindeterminatedisabledrequirednamevaluedescription
Slots
label
Events
No events are recorded for this component.
Example
Runnable example: site/examples/checkbox.ts. The snippet below is generated from the catalogued attributes.
<detent-checkbox
checked
default-checked
description
disabled
indeterminate
name
required
value
></detent-checkbox>Source
The pinned upstream source for this row:
src/components/ui/DrawCheckbox.tsxsha256 e4e2fa02733c…
Native files
The native module and its artifacts:
src/components/checkbox/checkbox.tssrc/components/checkbox/styles.csssrc/components/checkbox/define.tsdocs/components/checkbox.mdsite/examples/checkbox.tstests/browser/checkbox.spec.tsevidence/components/checkbox.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
checked | checked | boolean | undefined | Presence semantics: present means true, absent means false. |
default-checked | defaultChecked | boolean | false | Presence semantics: present means true, absent means false. |
description | description | string | undefined | Kebab-case attribute; camelCase property. |
disabled | disabled | boolean | false | Presence semantics: present means true, absent means false. |
indeterminate | indeterminate | boolean | false | Presence semantics: present means true, absent means false. |
name | — | — | — | Recorded in the catalog as an attribute. |
required | — | — | — | Recorded in the catalog as an attribute. |
value | — | — | — | Recorded in the catalog as an attribute. |
Properties
| Property | Type | Default | Notes |
|---|---|---|---|
checked | boolean | undefined | Property-only: assign from script; not accepted as an attribute. |
defaultChecked | boolean | false | Property-only: assign from script; not accepted as an attribute. |
indeterminate | boolean | false | Property-only: assign from script; not accepted as an attribute. |
disabled | boolean | false | Property-only: assign from script; not accepted as an attribute. |
required | — | — | Recorded in the catalog without a top-level type; pinned from source when the row is ported. |
name | — | — | Recorded in the catalog without a top-level type; pinned from source when the row is ported. |
value | — | — | Recorded in the catalog without a top-level type; pinned from source when the row is ported. |
description | string | undefined | Property-only: assign from script; not accepted as an attribute. |
Events
No custom events are recorded for this component.
Slots
| Slot | Notes |
|---|---|
label | Consumer content; rendered through a slot, never re-created. |
CSS customisation
- React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- Native additions: name, value (default "on"), required, setFormValue/setValidity, checkValidity/reportValidity, reset/restore, fieldset detection, and one composed change dispatch.
- A hidden input plus click-forwarding div became a same-tree `<label>` proxy so activation is native (PC-12.1).
- `indeterminate` is presentation only and submits nothing; it is cleared by user activation.
- Disabled no longer fades the text (upstream opacity-30 measured 1.9:1 on the description).
- Motion is CSS with two faithful keyframes: 280ms path draw cubic-bezier(0.65,0,0.35,1) and 320ms box pop 0.9 to 1.04 to 1; the indeterminate bar's springSnappy became a 240ms CSS animation (PC-10.4).
- Token and color-mix palette; light and dark are both real.
What it does
A checkbox that draws its checkmark, supports a mixed state and submits with a form like a native checkbox.
Upstream behaviour
- Checkmark animates via stroke-dashoffset (path length 0 -> 1) with a snappy draw curve
- Box scales 0.9 -> 1.04 -> 1.0 for a tiny physical overshoot, then settles
- Indeterminate state draws a bar from left to right via scaleX origin
- Accent background swaps to var(--accent) when checked — theme aware
- Full controlled / uncontrolled state support, plus ref forwarding
Differences from upstream
- React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- Native additions: name, value (default "on"), required, setFormValue/setValidity, checkValidity/reportValidity, reset/restore, fieldset detection, and one composed change dispatch.
- A hidden input plus click-forwarding div became a same-tree `<label>` proxy so activation is native (PC-12.1).
- `indeterminate` is presentation only and submits nothing; it is cleared by user activation.
- Disabled no longer fades the text (upstream opacity-30 measured 1.9:1 on the description).
- Motion is CSS with two faithful keyframes: 280ms path draw cubic-bezier(0.65,0,0.35,1) and 320ms box pop 0.9 to 1.04 to 1; the indeterminate bar's springSnappy became a 240ms CSS animation (PC-10.4).
- Token and color-mix palette; light and dark are both real.