Components
Checkbox
A restyled native checkbox on the shared field base.
The checkbox is a restyled native <input type="checkbox">, fully accessible, with the Zazz
check treatment. Bind it with checked, name, and value as usual.
Default
Loading components…
<fieldset class="field-group"> <legend>Preferences</legend> <div class="flex flex-col gap-xs"> <label class="field" data-orientation="horizontal"> <input type="checkbox" name="preferences-newsletter" /> <span class="field__label">Subscribe to the newsletter</span> </label> <label class="field" data-orientation="horizontal"> <input type="checkbox" name="preferences-terms" checked /> <span class="field__label">Accept terms & conditions</span> </label> </div></fieldset>/** * _checkbox.css — Checkbox (input[type="checkbox"]:not([role="switch"])) * * @layer reset * @requires layers.css, _variables.css * @uses appearance: none — redraws the native control from theme tokens * @uses checked/indeterminate fill with --primary and layer a glyph (never colour alone) * @tokens --checkbox-* (size, background, border, radius, checkmark-mask, indeterminate-mask) */@layer reset { :where(input[type="checkbox"]:not([role="switch"])) { --checkbox-size: var(--step-4_5); --checkbox-background: var(--input); --checkbox-border: var(--border); --checkbox-border--hover: var(--primary); --checkbox-background--checked: var(--primary); --checkbox-border--checked: var(--primary); --checkbox-radius: var(--radius-xs); /* @see https://www.svgbackgrounds.com/tools/svg-to-css/ ** Set to Legacy / URL Wrapper to update icon */ --checkbox-checkmark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cpolyline points='40 144 96 200 224 72' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); --checkbox-checkmark-size: var(--step-3); --checkbox-indeterminate-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cline x1='40' y1='128' x2='216' y2='128' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E"); --checkbox-indeterminate-size: var(--step-3); appearance: none; flex-shrink: 0; inline-size: var(--checkbox-size); block-size: var(--checkbox-size); background-color: var(--checkbox-background); border: 1px solid var(--checkbox-border); border-radius: var(--checkbox-radius); cursor: pointer; /* ring renders as box-shadow; transparent outline twin keeps focus visible in forced-colors / high-contrast modes */ --_ring-offset-width: 0px; --_ring-width: 0px; box-shadow: 0 0 0 var(--_ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--ring); outline: var(--outline-width) var(--outline-style) transparent; outline-offset: var(--outline-offset); transition: var(--default-transition); } :where(input[type="checkbox"]:not([role="switch"]):hover) { border-color: var(--checkbox-border--hover); } :where(input[type="checkbox"]:not([role="switch"]):focus-visible) { --_ring-offset-width: var(--ring-offset-width); --_ring-width: var(--ring-width); outline-color: transparent; } :where( input[type="checkbox"]:not([role="switch"]):checked, input[type="checkbox"]:not([role="switch"]):indeterminate ) { background-color: var(--checkbox-background--checked); border-color: var(--checkbox-border--checked); background-repeat: no-repeat; background-position: center; } :where(input[type="checkbox"]:not([role="switch"]):checked) { background-image: var(--checkbox-checkmark-mask); background-size: var(--checkbox-checkmark-size); } :where(input[type="checkbox"]:not([role="switch"]):indeterminate) { background-image: var(--checkbox-indeterminate-mask); background-size: var(--checkbox-indeterminate-size); }}