SGDS Checkbox Component Skill

<sgds-checkbox> can be used standalone or grouped in <sgds-checkbox-group>. The group manages shared validation, a fieldset label, and change detection. Standalone checkboxes work for "I agree" cases.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Multiple related checkboxes with a label? → Use <sgds-checkbox-group>

Single "I agree" checkbox? → Use <sgds-checkbox> standalone

Indeterminate state (e.g. partial select)? → Set indeterminate on the checkbox

Show validation feedback on group? → Set hasFeedback and invalidFeedback on the group