AI Textarea

Overview

Resources

Install

yarn add @camp/ai-textarea

Variations

Default

The default AI Textarea provides a clean, accessible text input area with intelligent features.

import { AITextarea } from '@camp/ai-textarea';
 
<AITextarea label="Default Textarea" placeholder="Enter text here" />;

Invalid State

AI Textarea displaying invalid state with helpful error messaging.

import { AITextarea } from '@camp/ai-textarea';
 
<AITextarea label="Invalid Textarea" placeholder="Enter text here" invalid />;

Disabled State

AI Textarea in disabled state for when user input is not allowed.

import { AITextarea } from '@camp/ai-textarea';
 
<AITextarea label="Disabled Textarea" placeholder="This is disabled" disabled />;

Usage

Best practices

• Use AI Textarea when users need to input longer, multi-line text content
• Always provide clear, descriptive labels for better accessibility
• Use appropriate placeholder text to guide user input
• Implement proper error handling and validation
• Consider the context where the textarea will be used (forms, chat interfaces, etc.)

Content guidelines

Accessibility

Keyboard support

• Tab: Moves focus to the textarea
• Enter: Creates new lines within the textarea
• Shift + Tab: Moves focus backward
• Arrow keys: Navigate within the text content
• Home/End: Move to beginning/end of current line
• Ctrl + Home/End: Move to beginning/end of entire text

Screen reader support

• Properly labeled with accessible names
• Error states are announced to screen readers
• Placeholder text is read when the field is empty
• Character count and validation status are announced