AI Textarea

AI Textarea is a multi-line text input component for Active Intelligence experiences. It supports a default form-style appearance and an inline-edit appearance that displays content as static text and expands on focus.

Overview

Resources

Install


yarn add @camp/ai-textarea

Usage

Basic usage

The AI Textarea component supports labels, validation states, theming, and two appearances: default (form-style) and inline-edit (content that expands on focus).


import { useState } from 'react';
import { AiTextarea } from '@camp/ai-textarea';
 
function MyComponent() {
  const [value, setValue] = useState('');
 
  return (
    <AiTextarea
      label="Description"
      placeholder="Enter text here"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

For inline-editable content (e.g. descriptions or notes that should look like static text until focused), use appearance="inline-edit". When collapsed it shows up to two lines; on focus it expands to an editable area. You can set the expanded height with the height prop (default is 100px).


import { AiTextarea } from '@camp/ai-textarea';
 
function InlineDescription() {
  return (
    <AiTextarea
      appearance="inline-edit"
      label="Project description"
      value="Click to edit this description."
      height={150} // can be a number or a string (e.g. '150px')
    />
  );
}

Avoid using placeholder when appearance="inline-edit"; use a label or default value so the content reads as static text. The component uses ThemeCheckProvider and supports a themed prop (default true) to adapt to theme context; see Styled Components & ThemeProvider for setup.

Best practices

Use the default appearance for form fields, long-form input, and chat interfaces
Use the inline-edit appearance for content that should feel like editable body text (e.g. descriptions, notes)
Always provide a clear, descriptive label for accessibility
Use the invalid prop to indicate validation errors
Prefer label or default value over placeholder when using inline-edit appearance
Use the height prop with inline-edit when you need a specific expanded height (default 100px)

Content guidelines

✅ DO

Use clear, descriptive labels that explain the expected input
Provide helpful placeholder text for default appearance
Use inline-edit for content that should read as static text until edited
Size the textarea (or expanded height) for the expected content length

🚫 DON’T

Don’t use vague or unclear labels
Don’t rely on placeholder with inline-edit; use labels or default value
Don’t use inline-edit for primary form fields that need explicit focus
Don’t make the textarea too small for the expected content

Variations

Default appearance

The default appearance is a standard form textarea with a visible border, background, and minimum height. Omit the appearance prop or set appearance="default".


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

Inline-edit appearance

The inline-edit appearance shows content as static text (up to two lines when collapsed). On focus, the textarea expands so users can edit. Use it for descriptions, notes, or other inline-editable content.


import { AiTextarea } from '@camp/ai-textarea';
 
<AiTextarea
  appearance="inline-edit"
  label="Editable description"
  value="This content appears as inline text. Click to expand and edit."
/>;

With a custom expanded height (default when expanded is 100px):


import { AiTextarea } from '@camp/ai-textarea';
 
<AiTextarea
  appearance="inline-edit"
  label="Notes"
  value="Click to edit. Expands to 200px when focused."
  height={200}
/>;

Invalid state


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

Disabled state


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

Inline-edit invalid and disabled


import { AiTextarea } from '@camp/ai-textarea';
 
<AiTextarea
  appearance="inline-edit"
  label="Invalid description"
  value="This content is invalid"
  invalid
/>;


import { AiTextarea } from '@camp/ai-textarea';
 
<AiTextarea
  appearance="inline-edit"
  label="Disabled description"
  value="Cannot edit this content"
  disabled
/>;

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

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