Checkbox
Checkboxes (COMPONENT_SPEC §22; Compose Checkbox and TriStateCheckbox) on a native <input type="checkbox">: a 48dp target around an 18dp box. Checking draws the check along its path on the default spatial spring while the box fills; unchecking fades it and snaps it away after 100ms. Indeterminate draws a dash; between checked and indeterminate the check's corner slides to the centre (Compose's cross-centre gravitation).
Compose 1.5.0-beta01 has two checkbox stylings behind ComposeMaterial3Flags.isCheckboxStylingFixEnabled. This library uses the flag-on one, which matches the token file and m3.material.io: an 18dp box, the check corner at 65%, a surface checkmark when disabled and a ripple in the box color. Compose defaults to the flag off (20dp, 70%, on-primary, content-color ripple); --m3e-comp-checkbox-styling-fix: 0 switches to it. Error is not a Compose parameter; its colors come from CheckboxTokens. While unchecked, Compose's flag-on ripple is transparent, so it shows no hover, focus or press; this library instead uses the m3.material.io state layer colors there: on-surface for hover and focus, primary when pressed, and error for all three with an error.
Static (m3e-css)
<label class="m3e-checkbox"> around the .m3e-checkbox__input, the __box (with its __mark SVG of two __stroke paths), the __state circle and an optional __label. Error: aria-invalid="true" on the input. The label toggles the checkbox and shows its hover and press, as in Compose's checkbox-with-text sample. The ripple needs @kyralabs/m3e-elements/ripple.js (this section uses attachAutoRipple).
Element
<m3e-checkbox checked indeterminate disabled invalid required name value label> renders the same contract around a native input (forms and the native change event work as usual). It adds what HTML cannot declare: the indeterminate attribute, the previous state that makes a dash entered from unchecked draw instead of morph, and the ripple. Below, Compose's tri-state sample: the parent reflects its two children.
React
<Checkbox isSelected defaultSelected onChange isIndeterminate isDisabled isInvalid isRequired name value> (React Aria useCheckbox); the same DOM as the element. There is no checkbox group: Compose has none, and a group of checkboxes is a fieldset or a role="group".