canopy-forms-input

Implement Canopy text inputs in Angular with LgInputField labeling and adornments.

23|46|Updated Sep 7, 2020
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-forms-input
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canopy-forms-input
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/forms-input
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-forms-input

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Best practices for Canopy text inputs help developers create accessible, consistent, and maintainable Angular forms using the lg-input-field component from Canopy.

Core Features & Use Cases

  • Clear labeling, hints, validation, and adornments for text inputs.
  • Guidelines for prefixes, suffixes, and input buttons to improve UX and accessibility.
  • Practical implementation references and examples for common form scenarios in Angular projects.

Quick Start

Apply Canopy text input best practices in a new Angular form by using LgInputField with proper labels, hints, and an optional prefix or suffix as needed.

Frequently Asked Questions about canopy-forms-input

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add prefixes and suffixes to Angular text inputs?

To add prefixes and suffixes to Angular text inputs, use the LgInputField component from Canopy. It provides specific guidance and examples for integrating input adornments to ensure accessible and maintainable forms across your application.

What are the best practices for accessible Angular forms using Canopy?

Accessible Angular forms using Canopy require consistent labeling, hints, and validation on text inputs. Following these best practices ensures your LgInputField components remain maintainable and provide a better user experience for all users.

Can I use Canopy input components with input buttons in my Angular project?

Yes, you can use Canopy input components with input buttons in your Angular project. The guidance covers scenarios involving single-line inputs, prefixes, suffixes, and input buttons to help you build functional and accessible forms.

How do I implement consistent labeling and hints for Angular form inputs?

You implement consistent labeling and hints for Angular form inputs by applying the Canopy text input best practices. The LgInputField component supports clear labeling and hint text to maintain accessibility and consistency across applications.

What is the best way to structure single-line text inputs in Angular?

The best way to structure single-line text inputs in Angular is using the Canopy LgInputField component. It provides practical implementation references for common form scenarios, ensuring your single-line inputs are accessible and maintainable.

When should I use input adornments in Angular forms?

You should use input adornments in Angular forms when you need to add prefixes, suffixes, or input buttons to clarify the expected data. Canopy guidance helps you implement these adornments while maintaining accessibility and a consistent user experience.