@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
/* ========================================
* CHECKBOX
* Styled native with description and error.
* ======================================== */
.cinder-checkbox-field,
.cinder-checkbox-field.cinder-form-field {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
/* The box belongs beside the first line of the label, not the middle of a label that wraps
(COR-2360). The row below offsets the box so its centre meets that first line's centre. */
align-items: flex-start;
gap: var(--cinder-space-1-5);
inline-size: auto;
}
/* A labelled field knows the label's line height, so the row can centre the box on the first
line. A field with no label (a bare box in a table cell) leaves the property unset and the
row adds no offset. A list row that leads with a bare checkbox sets the property itself (see
stacked-list-item.css). */
.cinder-checkbox-field:has(> .cinder-form-field__label) {
--_cinder-checkbox-line: calc(var(--cinder-text-sm) * var(--cinder-leading-normal));
}
/* The label takes the rest of the line and wraps inside it. Without this a long label's
max-content width does not fit beside the box, flex-wrap moves the whole label to a second
line, and the box is left alone above it. The description and error keep their own full-width
lines through their 100% flex basis. */
.cinder-checkbox-field > .cinder-form-field__label {
flex: 1 1 0%;
min-inline-size: 0;
order: 2;
}
.cinder-checkbox-field > .cinder-checkbox-row {
order: 1;
}
.cinder-checkbox-field > .cinder-form-field__description,
.cinder-checkbox-field > .cinder-form-field__error {
flex-basis: 100%;
order: 3;
}
/* The row is the hit area. The painted box is 18px (20px for the task variant); the row pads it
out to 24px, and to 44px under a coarse pointer (WCAG 2.5.8 and 2.5.5). Equal negative margins
take the padding back, so the row occupies exactly the box in layout and only the area that
answers a press grows. A press on the padding is forwarded to the input by the component. */
.cinder-checkbox-row {
--_cinder-checkbox-size: 1.125rem;
--_cinder-checkbox-glyph: 0.875rem;
--_cinder-checkbox-hit: 1.5rem;
--_cinder-checkbox-led: var(--_cinder-checkbox-line, var(--_cinder-checkbox-size));
--_cinder-checkbox-pad: calc((var(--_cinder-checkbox-hit) - var(--_cinder-checkbox-size)) / 2);
--_cinder-checkbox-lift: calc((var(--_cinder-checkbox-led) - var(--_cinder-checkbox-size)) / 2);
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
flex-shrink: 0;
padding: var(--_cinder-checkbox-pad);
margin-inline: calc(-1 * var(--_cinder-checkbox-pad));
/* The start margin also carries the first-line offset: half of what the label's line has over
the box. It is zero when the field has no label, and a negative half when the box is taller
than the line. */
margin-block-start: calc(var(--_cinder-checkbox-lift) - var(--_cinder-checkbox-pad));
margin-block-end: calc(-1 * var(--_cinder-checkbox-pad));
cursor: pointer;
}
.cinder-checkbox-row:has(.cinder-checkbox:disabled, .cinder-checkbox[aria-disabled='true']) {
cursor: not-allowed;
}
/* The task variant: a round 20px control for task lists. */
.cinder-checkbox-row--task {
--_cinder-checkbox-size: 1.25rem;
--_cinder-checkbox-glyph: 1rem;
}
@media (any-pointer: coarse) {
.cinder-checkbox-row {
--_cinder-checkbox-hit: 2.75rem;
}
}
.cinder-checkbox {
/* Custom-painted but native: keep the input in the layout so screen readers
* and form submission see it; restyle via appearance:none. */
appearance: none;
width: var(--_cinder-checkbox-size, 1.125rem);
height: var(--_cinder-checkbox-size, 1.125rem);
margin: 0;
/* An unchecked box is only its edge, so it is the 3:1 contrast tier, not the quiet control edge
a text field draws (owner decision, 2026-11-11). */
border: 1px solid var(--cinder-border-contrast);
border-radius: var(--cinder-radius-sm);
background: var(--cinder-control-background);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition:
border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
background var(--cinder-duration-fast) var(--cinder-ease-standard),
box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
}
/* The task variant is a circle. It reuses the checked fill, the check glyph and every state rule
below, so its checked state is the same accent fill as the square box (checkbox-task.test.ts
holds it to 3:1 against the surface) and the unchecked ring keeps the control border tier. */
.cinder-checkbox.cinder-checkbox--task {
border-radius: var(--cinder-radius-full);
}
/* Sticky-hover suppression on touch: wrap hover-only chrome so it doesn't
* "stick" after tap on touch devices that emulate :hover. */
@media (hover: hover) {
.cinder-checkbox:hover:not(:disabled):not([aria-disabled='true']) {
border-color: var(--cinder-border-contrast-hover);
}
}
.cinder-checkbox:focus-visible {
outline: var(--cinder-ring-width) solid transparent;
box-shadow:
0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width))
var(--_cinder-checkbox-ring, var(--cinder-ring-color));
}
@media (forced-colors: active) {
.cinder-checkbox:focus-visible {
outline: var(--cinder-ring-width) solid Highlight;
outline-offset: 1px;
}
}
/* Checked state — paint the box with the accent color. The visible glyph is
* drawn by the aria-hidden sibling indicator with `mask-image` so the icon
* color tracks `--cinder-accent-contrast` through theme switches. */
.cinder-checkbox:checked {
background: var(--cinder-accent-solid);
border-color: var(--cinder-accent-solid);
}
.cinder-checkbox--indicator[data-cinder-checked] {
background: var(--cinder-accent-solid);
border-color: var(--cinder-accent-solid);
}
.cinder-checkbox-field__control {
position: relative;
display: inline-flex;
inline-size: var(--_cinder-checkbox-size, 1.125rem);
block-size: var(--_cinder-checkbox-size, 1.125rem);
flex-shrink: 0;
}
.cinder-checkbox-field__indicator {
--_cinder-checkbox-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.7 4.3L6.5 10.6 3.3 7.4 2 8.7l4.5 4.5 7.6-7.6z'/%3E%3C/svg%3E");
--_cinder-checkbox-indeterminate-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='2' rx='1'/%3E%3C/svg%3E");
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
inline-size: var(--_cinder-checkbox-glyph, 0.875rem);
block-size: var(--_cinder-checkbox-glyph, 0.875rem);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1;
opacity: 0;
color: var(--cinder-accent-contrast);
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.cinder-checkbox:checked + .cinder-checkbox-field__indicator,
.cinder-checkbox--indicator[data-cinder-checked] + .cinder-checkbox-field__indicator {
opacity: 1;
-webkit-mask-image: var(--_cinder-checkbox-check-mask);
mask-image: var(--_cinder-checkbox-check-mask);
}
.cinder-checkbox:indeterminate + .cinder-checkbox-field__indicator {
opacity: 1;
-webkit-mask-image: var(--_cinder-checkbox-indeterminate-mask);
mask-image: var(--_cinder-checkbox-indeterminate-mask);
}
@media (forced-colors: active) {
.cinder-checkbox:checked + .cinder-checkbox-field__indicator,
.cinder-checkbox:indeterminate + .cinder-checkbox-field__indicator,
.cinder-checkbox--indicator[data-cinder-checked] + .cinder-checkbox-field__indicator {
forced-color-adjust: none;
background-color: ButtonText;
}
}
.cinder-checkbox:disabled:checked + .cinder-checkbox-field__indicator,
.cinder-checkbox:disabled:indeterminate + .cinder-checkbox-field__indicator,
.cinder-checkbox[aria-disabled='true']:checked + .cinder-checkbox-field__indicator,
.cinder-checkbox[aria-disabled='true']:indeterminate + .cinder-checkbox-field__indicator,
.cinder-checkbox--indicator[data-cinder-disabled][data-cinder-checked]
+ .cinder-checkbox-field__indicator {
color: var(--cinder-text-disabled);
}
.cinder-checkbox:indeterminate {
background: var(--cinder-accent-solid);
border-color: var(--cinder-accent-solid);
}
/* Disabled state */
.cinder-checkbox:disabled,
.cinder-checkbox[aria-disabled='true'] {
cursor: not-allowed;
background: var(--cinder-control-background-disabled);
border-color: var(--cinder-control-border-disabled);
}
.cinder-checkbox--indicator[data-cinder-disabled] {
cursor: not-allowed;
background: var(--cinder-control-background-disabled);
border-color: var(--cinder-control-border-disabled);
}
.cinder-checkbox:disabled:checked,
.cinder-checkbox:disabled:indeterminate,
.cinder-checkbox[aria-disabled='true']:checked,
.cinder-checkbox[aria-disabled='true']:indeterminate {
background-color: var(--cinder-fill-disabled);
border-color: var(--cinder-fill-disabled);
}
.cinder-checkbox--indicator[data-cinder-disabled][data-cinder-checked] {
background-color: var(--cinder-fill-disabled);
border-color: var(--cinder-fill-disabled);
}
/* Error / invalid state */
.cinder-checkbox[aria-invalid='true'] {
--_cinder-checkbox-ring: var(--cinder-status-danger-solid);
border-color: var(--cinder-control-border-invalid);
}
/* Checked and indeterminate boxes are solid accent fills, so the ring gets a
page-coloured gap (COR-1498). Written inline so an invalid box keeps its
danger ring through the hook. */
.cinder-checkbox:checked:focus-visible,
.cinder-checkbox:indeterminate:focus-visible {
box-shadow:
0 0 0 var(--_cinder-focus-ring-filled-gap) var(--cinder-ring-offset-color),
0 0 0 calc(var(--_cinder-focus-ring-filled-gap) + var(--cinder-ring-width))
var(--_cinder-checkbox-ring, var(--cinder-ring-color));
}
@media (forced-colors: active) {
.cinder-checkbox:checked:focus-visible,
.cinder-checkbox:indeterminate:focus-visible {
outline: var(--cinder-ring-width) solid Highlight;
outline-offset: 1px;
}
}
/* Label */
.cinder-checkbox-field__label,
.cinder-checkbox-field .cinder-form-field__label {
display: inline-flex;
align-items: center;
gap: var(--cinder-space-1);
font-size: var(--cinder-text-sm);
line-height: var(--cinder-leading-normal);
color: var(--cinder-text-default);
cursor: pointer;
}
/* The `[data-disabled]` selectors cover Checkbox's own JS `disabled` prop.
The `:has(.cinder-checkbox:disabled)` selectors cover the native fieldset
cascade (CheckboxGroup disables descendants via