For situations where the <auro-checkbox> web component cannot be used, a native HTML <input type="checkbox"> element can be styled with the Auro Design System tokens to approximate the visual appearance of auro-checkbox. Unlike auro-hyperlink, Web Core Style Sheets does not provide a prebuilt .checkbox class, so the styling must be authored manually using Auro design tokens.

The native checkbox can be reset and restyled with the Auro design tokens published by @aurodesignsystem/design-tokens. The pattern below replicates the size, border, and selected-state colors used by auro-checkbox.

@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
​
.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: var(--ds-size-300, 1.5rem);
  height: var(--ds-size-300, 1.5rem);
  border: 1px solid var(--ds-color-border-ui-default, #6e767f);
  border-radius: var(--ds-border-radius, 4px);
  background-color: var(--ds-color-container-primary-default, #ffffff);
  cursor: pointer;
  vertical-align: middle;
}
​
.checkbox:checked {
  background-color: var(--ds-color-container-ui-selected-default, #01426a);
  border-color: var(--ds-color-border-ui-selected-default, #01426a);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='5 12 10 17 19 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}
​
.checkbox:focus-visible {
  outline: 2px solid var(--ds-color-border-active-default, #01426a);
  outline-offset: 2px;
}
​
.checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

Apply the .checkbox class to a native <input type="checkbox"> element and pair it with a <label>:

<label>
  <input type="checkbox" class="checkbox" name="terms" value="agree" />
  I agree to the terms
</label>

Use a <fieldset> and <legend> to give the group an accessible name:

<fieldset>
  <legend>Select your preferences</legend>
  <label><input type="checkbox" class="checkbox" name="prefs" value="email" /> Email</label>
  <label><input type="checkbox" class="checkbox" name="prefs" value="sms" /> SMS</label>
  <label><input type="checkbox" class="checkbox" name="prefs" value="push" /> Push notifications</label>
</fieldset>

While the CSS above replicates the visual styling of auro-checkbox, the following functionality built into the auro-checkbox and auro-checkbox-group web components is not available when using plain HTML:

auro-checkbox-group supports a required attribute that validates "at least one checkbox in the group must be selected." Native HTML has no equivalent — required on individual checkboxes only enforces that that specific checkbox is checked. With plain HTML, you must write custom JavaScript to coordinate group-level validation across multiple inputs.

auro-checkbox-group exposes setCustomValidity and setCustomValidityValueMissing for fully customizable error messages per validity state. Native checkboxes surface browser-controlled validation messages that cannot be customized beyond setCustomValidity() on the individual input.

auro-checkbox-group tracks a touched state so validation errors only appear after the user has interacted with the group. Native checkboxes have no built-in touched concept — you must implement focus/blur tracking yourself to avoid showing errors on initial render.

auro-checkbox-group exposes a single value property that reflects the array of checked items in the group. With native HTML, you must query each input individually and assemble the selected values yourself, and there is no single change event that fires when the group's value changes.

auro-checkbox automatically associates slot content as the accessible label, eliminating the need for <label for> wiring or wrapping <label> elements. With native HTML, you must manage id and for attributes manually to keep labels in sync with inputs.

auro-checkbox-group propagates a single disabled attribute to all child checkboxes. With native HTML, you must apply disabled to each input individually or wrap them in a <fieldset disabled>, the latter of which has additional side effects on nested form controls.

auro-checkbox-group dispatches auroFormElement-validated events so parent auro-form elements can coordinate validation across all child fields. Native checkboxes participate in form submission but do not emit the structured validation events that the Auro form system expects.

auro-checkbox-group supports a horizontal attribute for compact groups of up to three items, with spacing and alignment handled by the component. With native HTML, you must author the layout CSS yourself.

auro-checkbox-group provides a single reset() method that clears all checkboxes and resets validation state in one call. With native HTML, you must iterate each input to uncheck it and separately clear any custom validation state you are tracking.

auro-checkbox consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped. A CSS-only checkbox is tied to whichever tokens were imported at author time and will not respond to runtime theme switching the way the web component does.

Use auro-checkbox and auro-checkbox-group whenever possible. Fall back to a CSS-styled native checkbox only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to reimplement group validation, touched tracking, and value coordination yourself.