canopy-forms-checkbox

name	canopy-forms-checkbox
description	Best practices for the Canopy Checkbox and Checkbox Group components. Trigger when adding multi-selection checkboxes, agreement confirmation, or grouped checkbox controls in a form in an Angular project using Canopy.
license	MIT
metadata	{"source":"https://github.com/Legal-and-General/canopy/tree/master/projects/canopy/src/lib/forms/toggle/docs/checkbox/guide.mdx"}

Canopy Checkbox — Best Practices

This skill provides usage guidance, dos and don'ts, and input reference for Canopy checkbox components from @legal-and-general/canopy.

Apply this skill whenever you use LgToggleComponent (as lg-checkbox) or LgCheckboxGroupComponent.

---

Import

import { LgToggleComponent } from '@legal-and-general/canopy';

For grouped checkboxes:

import { LgCheckboxGroupComponent, LgToggleComponent } from '@legal-and-general/canopy';

---

Single Checkbox

<lg-checkbox formControlName="agreed" value="yes">
  I agree to the terms and conditions
</lg-checkbox>

---

Checkbox Group

Use lg-checkbox-group when presenting two or more related options.

<lg-checkbox-group formControlName="colours">
  Select your colours
  <lg-hint>Choose all that apply</lg-hint>
  <lg-toggle value="red">Red</lg-toggle>
  <lg-toggle value="blue">Blue</lg-toggle>
  <lg-toggle value="green">Green</lg-toggle>
</lg-checkbox-group>

---

LgToggleComponent Inputs

Input	Type	Default	Required	Description
id	string	auto-generated	No	HTML id attribute.
name	string	null	Yes	HTML name attribute.
value	string	null	Yes	HTML value attribute.
focus	boolean	null	No	Sets focus on the checkbox.
size	'sm' | 'lg'	'lg'	No	Size of the checkbox.
ariaDescribedBy	string	null	No	ID of element that describes the checkbox.

LgToggleComponent Outputs

Output	Type	Description
blur	EventEmitter<Event>	Emitted on blur.

LgCheckboxGroupComponent Inputs

Input	Type	Default	Description
id	string	auto-generated	HTML id attribute.
name	string	auto-generated	Sets name on all checkboxes in the group.
inline	boolean	false	Displays checkboxes inline.
focus	boolean	null	Sets focus on the fieldset.

---

Accessibility

• Always group related checkboxes using lg-checkbox-group with a clear label.
• Use lg-hint to provide extra context where needed.
• Ensure all checkboxes have clear, descriptive labels.
• Set ariaDescribedBy to link checkboxes to hint or validation messages.
• Keyboard users must be able to tab through all checkboxes and toggle them with Space.

---

Dos and Don'ts

Do

1. Do use to confirm a response (e.g. agreement to terms).
2. Do use to allow the user to choose from multiple options.

Don't

1. Don't use negative labels.
2. Don't use as part of a dark pattern.
3. Don't use when a single exclusive response is required — use radio buttons instead.