form-textarea-usage

Name: form-textarea-usage
Availability: InStock
Author: Techsio

Create accessible labeled multi-line text inputs with validation and help text.

2|Updated Dec 2, 2024

Search Tags:#typescript #a11y #react #validation #form #ui-kit #textarea

Ready to run

npx skills add https://github.com/TechsioCZ/new-engine --skill form-textarea-usage

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: form-textarea-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/form-textarea-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill form-textarea-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use FormTextarea to provide labeled multi-line text fields with integrated validation, help text, size, and resize options for consistent UI across forms.

Core Features & Use Cases

Complete textarea fields with a Label, Textarea, StatusText, and validation status mapping for accessible forms.
Resize and size options to fit various layouts without custom styles.
Reuse across notes, descriptions, and comments in dashboards and admin UI while preserving accessibility.

Quick Start

Import the FormTextarea component and render it with an id and label to capture multi-line input.

Frequently Asked Questions about form-textarea-usage

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

FAQPage Schema

How do I add an accessible labeled textarea to a React form?▼

Use a labeled multi-line textarea component to handle accessible text input, integrating validation status, help text, and resize controls for consistent UI behavior across React forms.

Can I control the resize and size options of a textarea without custom CSS?▼

Yes, resize and size options are built into the textarea component props, letting you fit multi-line input fields into various form layouts without writing custom CSS styles.

How does textarea validation status mapping work for accessible forms?▼

Validation status mapping links the validateStatus prop to a StatusText element, passing validation state to screen readers and ensuring accessible labeled textareas display error feedback clearly.

Does the FormTextarea component work with TypeScript?▼

Yes, the reusable textarea component works with TypeScript, enforcing standard props like id, label, validateStatus, resize, and helpText to ensure type-safe accessible multi-line text input.

When should I use a multi-line textarea instead of a standard text input?▼

Use a multi-line textarea component for capturing longer user content like notes, descriptions, and comments in dashboards, where resize controls and help text are needed for accessible data entry.