Developer Docs

Quick reference guides with props tables, usage examples, and best practices for rapid development

Components

Form Components

Display Components

Feedback Components

Layout Components

Navigation Components

Components/Docs/TextArea

TextArea

Multi-line text input with auto-resize and character counting

✨ Quick Examples

Multi-line text input with validation, character limits, and auto-resize.

Basic TextArea

Description

With Validation

Message*

Auto-Resize

Auto-resizing Comments

🔧 Props

Prop	Type	Default	Description
id	string	'textarea-{timestamp}'	Unique identifier (auto-generated)
label	string	''	Label text displayed above textarea
value	State \| string	''	Textarea value (can be state or primitive)
placeholder	string	''	Placeholder text
message	State<{code, detail}>	undefined	Validation message object
required	boolean	false	Shows red asterisk when true
disabled	boolean	false	Disables textarea
rows	number	3	Number of visible text rows
maxLength	number	undefined	Maximum character length
autoResize	boolean	false	Grows with content (manual height update required)
oninput	Function	undefined	Input event handler
class	string	''	Custom CSS classes

💻 Usage

Basic Usage

const description = van.state('');

TextArea({
  label: 'Description',
  placeholder: 'Enter your description...',
  value: description,
  rows: 4,
  oninput: e => description.val = e.target.value
})

With Validation

const message = van.state('');
const messageError = van.state({ code: '', detail: '' });

TextArea({
  label: 'Message',
  placeholder: 'Type your message...',
  value: message,
  required: true,
  message: messageError,
  oninput: e => {
    message.val = e.target.value;
    if (!e.target.value) {
      messageError.val = { code: 'error', detail: 'Required' };
    } else if (e.target.value.length < 10) {
      messageError.val = { code: 'warning', detail: 'Too short' };
    } else {
      messageError.val = { code: 'success', detail: 'Good!' };
    }
  }
})

Auto-Resize

const autoText = van.state('');

TextArea({
  label: 'Comments',
  value: autoText,
  autoResize: true,
  oninput: e => {
    autoText.val = e.target.value;
    // REQUIRED: Manual height update
    e.target.style.height = e.target.scrollHeight + 'px';
  }
})

⚡️ Best Practices

Always provide id and label for accessibility
Use rows prop to set appropriate initial height (3-5 typically)
Show character counts when using maxLength
Provide validation feedback using message prop
Remember to manually update height when using autoResize
Must provide oninput handler - state is NOT automatically bound

✨ Key Features

TextArea component capabilities and design patterns.

filterClassName - Complete Tailwind override capability
Smart borders - Auto-colors based on validation state
Auto-resize - Optional content-aware height growth
Character limits - HTML5 maxLength support
Validation messages - Consistent with Input component
Required indicator - Red asterisk on label
Disabled state - Visual feedback and cursor change
Auto-generated IDs - Ensures label association

Explore More Components

Browse other component categories