CatalystTextAreav1.1.2Documentation Under Review
A multi-line text input component for capturing user feedback, comments, and longer text entries in product interfaces.
Overview
The Product TextArea component provides a flexible, multi-line text input optimized for product interfaces. It includes built-in support for character limits, validation states, and three size variants with product-specific typography.
Installation
npm install @pmi/catalyst-text-areaUsage
Basic TextArea
Variants
Sizes
The Product TextArea supports three size variants with product-optimized typography: sm, md (default), and lg.
States
Danger State
Use the danger prop to indicate validation errors or warning states.
Disabled State
The disabled state prevents user interaction and reduces opacity.
All States
Advanced Examples
Character Counter with Validation
Real-time character counting with validation feedback for user-generated content.
Form Field with Helper Text
Complete form field pattern with label, input, and contextual helper text.
Tag Input Pattern
Use the asChild prop to create complex input patterns like tag chips with textarea.
Real-World Examples
Custom Styling
Infinity Theme Example
Custom styling for the Infinity product theme with aqua accent colors.
Accessibility
The Product TextArea component follows WCAG 2.1 AA guidelines:
- Semantic HTML: Uses native
<textarea>element for proper form integration - ARIA Labels: Associate with
<Label>component usinghtmlForandidattributes - ARIA Descriptions: Use
aria-describedbyto connect with helper text or error messages - ARIA Live Regions: Use
aria-live="polite"for dynamic character count updates - ARIA Invalid: Set
aria-invalid="true"when in danger/error state - Role Alert: Use
role="alert"on error messages for immediate screen reader announcement - Focus Management: Clear focus indicators with 1px inset ring meeting contrast requirements
- Keyboard Navigation: Full keyboard support with standard textarea interactions
- Screen Reader Labels: Use
.sr-onlyfor icon-only content (e.g., "Error:")
API Reference
TextArea Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Controls padding and text size (sm=text-sm, md=text-base, lg=text-lg) |
danger | boolean | false | Applies error/warning styling with red color scheme |
disabled | boolean | false | Disables the textarea and reduces opacity to 40% |
asChild | boolean | false | Enables composition by merging props onto child element |
className | string | - | Additional CSS classes for custom styling |
placeholder | string | - | Placeholder text when textarea is empty |
defaultValue | string | - | Initial uncontrolled value |
value | string | - | Controlled value for state management |
onChange | (e: ChangeEvent<HTMLTextAreaElement>) => void | - | Change event handler |
maxLength | number | - | Maximum character limit (enforced by browser) |
rows | number | - | Number of visible text rows |
cols | number | - | Number of visible text columns |
aria-label | string | - | Accessible label for screen readers |
aria-describedby | string | - | ID of element describing the textarea |
aria-invalid | boolean | 'true' | 'false' | - | Indicates validation state |
aria-required | boolean | 'true' | 'false' | - | Indicates if field is required |
aria-live | 'polite' | 'assertive' | 'off' | - | Screen reader announcement behavior |
unstyled | boolean | false | Disables all default CVA/Tailwind styling, only applies className. |
Related Components
- Label - For labeling form fields (shared component)
- SubText - For helper text and validation messages (shared component)
- TextField - For single-line text input
- Tag - For tag chip patterns with textarea
Best Practices
- Character Limits: Always show character counters when enforcing
maxLength - Validation Feedback: Provide clear, immediate feedback for validation errors
- Helper Text: Use SubText to guide users on expected input format
- Label Association: Always associate textarea with a Label using
htmlFor/id - Appropriate Sizing: Use
smfor compact layouts,mdfor standard forms,lgfor emphasized inputs - Placeholder Text: Keep placeholder text concise and action-oriented
- Minimum Height: Default
min-h-28(7rem/112px) provides comfortable multi-line editing - Resize Behavior: Allow default browser resize for user preference unless specifically constrained
- Monospace Font: Use
font-monofor code or configuration inputs - Accessibility: Always provide labels, descriptions, and appropriate ARIA attributes