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.
value	Array<string>	null	Sets the default checked checkboxes; must match the value of the toggle buttons.
focus	boolean	null	Sets focus on the fieldset.
disabled	boolean	false	Disables all inner checkboxes.
inline	boolean	false	Displays checkboxes inline.
ariaDescribedBy	string	null	ID of element that describes the checkboxes.

---

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 always provide a clear, descriptive label for every checkbox.
2. Do use to allow the user to choose from multiple options.
3. Do use a single checkbox to capture acknowledgement or consent (e.g. "I agree to the terms and conditions").
4. Do use a checkbox to confirm an action has been completed (e.g. in a checklist).

Don't

1. Don't rely on placeholder text or tooltips as a substitute for a label.
2. Don't use negative labels.
3. Don't use as part of a dark pattern.
4. Don't use when a single exclusive response is required — use radio buttons instead.