canopy-forms-filter-buttons
A guide for building single or multi-select filter controls using the Canopy library in Angular.
Install
mkdir -p .claude/skills/canopy-forms-filter-buttons && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11477" && unzip -o skill.zip -d .claude/skills/canopy-forms-filter-buttons && rm skill.zipInstalls to .claude/skills/canopy-forms-filter-buttons
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Best practices for Canopy Filter Buttons. Trigger when adding filter button controls for narrowing data sets, with single or multiple selection, in an Angular project using Canopy.Key capabilities
- →Implement single-selection filter buttons using radio buttons.
- →Implement multiple-selection filter buttons using checkboxes.
- →Apply styling for filter buttons within `lg-filter-container`.
- →Ensure correct import paths for Canopy components.
How it works
This skill provides usage guidance and code examples for implementing Canopy filter buttons, distinguishing between single and multiple selection types. It outlines best practices for styling and component usage.
Inputs & outputs
When to use canopy-forms-filter-buttons
- →Add single-select filter buttons
- →Add multi-select filter buttons
- →Implement filter container patterns
About this skill
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
- Do use the deselected state as the default for all filter buttons.
- Do keep filter labels succinct.
- Do choose the correct button type — Select One when only one filter can be active, Select Multiple when several can.
- Do maintain 12 px horizontal space between buttons.
Don't
- Don't use filter buttons for more than 10 filter options — use radio buttons or checkboxes in a filter panel instead.
- Don't centre or right-align the filter buttons.
- 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. |
When not to use it
- →When designing filter controls with more than 10 options.
- →When filter buttons need to be centered or right-aligned.
- →When mixing single and multiple selection filters in the same group.
Limitations
- →Do not use filter buttons for more than 10 filter options.
- →Do not centre or right-align the filter buttons.
- →Do not mix 'Select one' and 'Select multiple' filters in the same group.
How it compares
This skill offers specific, best-practice-aligned guidance for Canopy filter buttons, ensuring consistent UI/UX and proper component usage, unlike generic Angular form element implementation.
Compared to similar skills
canopy-forms-filter-buttons side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| canopy-forms-filter-buttons (this skill) | 0 | 3mo | No flags | Beginner |
| igniteui-angular-theming | 0 | 3mo | No flags | Intermediate |
| angular-style | 0 | 2mo | No flags | Beginner |
| igniteui-angular-components | 1 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Legal-and-General
View all by Legal-and-General →You might also like
igniteui-angular-theming
igniteui
Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens.
angular-style
icpna-agent
ESPAÑOL - Guía de ESTILOS GLOBALES y TIPOGRAFÍA.
igniteui-angular-components
igniteui
Provides guidance on all non-grid Ignite UI for Angular UI components including application setup and architecture, form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, reactive forms), layout (Tabs, Bottom Navigation, Stepper, Accordion, Splitter, Navigation Drawer, Layout Manager), data display (List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Bar, Linear Progress Bar, Circular Progress Bar, Chat), feedback/overlays (Dialog, Snackbar, Toast, Banner), directives (Button, Ripple, Tooltip, Drag and Drop), Dock Manager, and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart, IgxCategoryChart, IgxFinancialChart, IgxDataChart, IgxPieChart). Use when users ask about any Ignite UI Angular component that is not a data grid, such as forms, inputs, dropdowns, date pickers, dialogs, navigation, lists, trees, cards, charts, or application scaffolding and setup.
Mifos Web App Agent Skills
openMF
Core capabilities and rules for AI agents contributing to the MifosX Web App (Angular).
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.