skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

form-textarea-usage

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
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill form-textarea-usage
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
TechsioCZTechsioCZ
2

form-checkbox-usage

Render accessible labeled checkboxes with validation using FormCheckbox and ZagJS.

Official
Intermediate
trycompaitrycompai
1.8k

forms

Build React forms with React Hook Form and Zod validation.

Official
Intermediate
TechsioCZTechsioCZ
2

checkbox-usage

Guide checkbox usage with Checkbox and FormCheckbox from @techsio/ui-kit.

Official
Intermediate
fellipeutakafellipeutaka
6

react-aria

Build accessible React components with hooks managing ARIA attributes and keyboard interactions.

Community
Advanced