Canopy Filter Buttons — Best Practices

This skill provides usage guidance and dos and don'ts for Canopy filter buttons from @legal-and-general/canopy.

Apply this skill when building filter controls for data sets. Filter buttons are typically used inside a lg-filter-container — see also the filter-container skill.

---

Import

For single selection (select one):

import { LgRadioGroupComponent, LgRadioButtonComponent } from '@legal-and-general/canopy';

For multiple selection (select multiple):

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

---

Select One (Single Selection)

Style radio buttons as filter buttons to allow a single selection:

<lg-radio-group formControlName="status">
  Status
  <lg-radio-button value="all">All</lg-radio-button>
  <lg-radio-button value="active">Active</lg-radio-button>
  <lg-radio-button value="closed">Closed</lg-radio-button>
</lg-radio-group>

---

Select Multiple

Use checkbox group to allow multiple simultaneous selections:

<lg-checkbox-group formControlName="types">
  Document type
  <lg-toggle value="statements">Statements</lg-toggle>
  <lg-toggle value="letters">Letters</lg-toggle>
  <lg-toggle value="reports">Reports</lg-toggle>
</lg-checkbox-group>

---

Dos and Don'ts

Do

1. Do use the deselected state as the default for all filter buttons.
2. Do keep filter labels succinct.
3. Do choose the correct button type — Select One when only one filter can be active, Select Multiple when several can.
4. Do maintain 12 px horizontal space between buttons.

Don't

1. Don't use filter buttons for more than 10 filter options — use radio buttons or checkboxes in a filter panel instead.
2. Don't centre or right-align the filter buttons.
3. Don't mix 'Select one' and 'Select multiple' filters in the same group.

---

Inputs

Select One — LgRadioGroupComponent

Input	Type	Default	Required	Description
id	string	auto-generated	No	HTML id attribute.
name	string	auto-generated	No	Sets name on all buttons in the group.
value	boolean | string	null	No	Default selected value.
focus	boolean	null	No	Sets focus on the fieldset.

Select One — LgRadioButtonComponent

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.
ariaDescribedBy	string	null	No	ID of the element that describes the radio button.

Select Multiple — LgCheckboxGroupComponent

Input	Type	Default	Required	Description
id	string	auto-generated	No	HTML id attribute.
name	string	auto-generated	No	Sets name on all toggles in the group.
value	Array<string>	null	No	Default checked values.
focus	boolean	null	No	Sets focus on the fieldset.
disabled	boolean	false	No	Disables all inner filter buttons.
ariaDescribedBy	string	null	No	ID of the element that describes the group.

Select Multiple — LgToggleComponent

Input	Type	Default	Required	Description
id	string	auto-generated	No	HTML id attribute.
name	string	auto-generated	No	HTML name attribute.
value	string	null	Yes	HTML value attribute.
checked	boolean	false	No	Default checked state.