The native HTML <input type="checkbox"> is functional but minimal. It cannot be styled consistently across browsers, offers no group-level validation, and provides no integration with a design system. auro-checkbox and auro-checkbox-group address these gaps.

Native checkboxes have basic accessibility, but managing groups of related checkboxes — with a shared legend, coordinated validation, and consistent keyboard behavior — requires significant custom work.

auro-checkbox provides:

• Proper ARIA semantics — Each checkbox carries role="checkbox", aria-checked, and aria-disabled attributes that stay in sync with component state.
• Automatic label binding — Slot content is automatically associated as the accessible label, eliminating <label for> wiring.
• Group-level semantics — auro-checkbox-group wraps checkboxes with a legend slot, giving screen readers a clear group description.
• Keyboard interaction — Space toggles the checkbox, matching the expected interaction pattern.

HTML has no native concept of a checkbox group. Building one requires manual DOM wiring for legends, error messages, and validation state.

auro-checkbox-group handles this with:

• A coordinated value array reflecting all checked items
• Group-level required validation (at least one must be selected)
• Propagation of disabled state to all child checkboxes
• Horizontal layout option for compact groups (up to 3 items)
• A single reset() method that clears all checkboxes and validation state

Native checkboxes support required on individual inputs, but there is no way to require "at least one selected" across a group without JavaScript.

auro-checkbox-group integrates with the Auro form validation system:

• Group-level required validation
• Custom error messages via setCustomValidity and setCustomValidityValueMissing
• touched tracking so errors only appear after user interaction
• Dispatches auroFormElement-validated events for parent form coordination

Native checkboxes render differently across browsers and operating systems. Their appearance cannot be reliably controlled with CSS alone.

auro-checkbox is built with the Auro Design System:

• Consistent visual language across all browsers and platforms
• Light and dark theme support (appearance="default" or appearance="inverse")
• CSS ::part() selectors for targeted styling (checkbox, checkbox-input, checkbox-label)
• Embedded checkmark SVG that renders only when checked