Skip to Content
Dashflow Logo

TextArea Component

A comprehensive guide to using the TextArea component with examples, props, and best practices.

Overview

The TextArea component provides a multi-line text input field for longer text content. It's designed for forms, comments, descriptions, and any interface where users need to input multiple lines of text.

Basic Usage

import { TextArea } from '@dashflowx/core'


export default function TextAreaExample() {
  return (
    <TextArea 
      placeholder="Enter your message..."
      rows={4}
    />
  )
}

Preview:

Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes
placeholderstring'Enter your message...'Placeholder text
rowsnumber4Number of visible text lines
disabledbooleanfalseWhether the textarea is disabled
fullwidthbooleantrueWhether the textarea takes full width
lablestring'Message'Label for the textarea
requiredbooleanfalseWhether the field is required
prefixElementJSX.Element-Element to display before the textarea
sufixElementJSX.Element-Element to display after the textarea
sucessMsgstring-Success message to display
errorMsgstring-Error message to display

Examples

Basic TextArea

import { TextArea } from '@dashflowx/core'


export default function BasicTextArea() {
  return (
    <TextArea 
      placeholder="Enter your message..."
      rows={4}
    />
  )
}

Preview:

Custom Styled TextArea

import { TextArea } from '@dashflowx/core'


export default function CustomStyledTextArea() {
  return (
    <TextArea 
      placeholder="Enter your message..."
      rows={4}
      className="border border-blue-500 rounded-lg p-4"
    />
  )
}

Preview:

TextArea with Label

import { TextArea } from '@dashflowx/core'


export default function TextAreaWithLabel() {
  return (
    <TextArea 
      lable="Comments"
      placeholder="Enter your comments..."
      rows={4}
    />
  )
}

Preview:

Required TextArea

import { TextArea } from '@dashflowx/core'


export default function RequiredTextArea() {
  return (
    <TextArea 
      lable="Description"
      placeholder="Enter description..."
      rows={4}
      required={true}
    />
  )
}

Preview:

Disabled TextArea

import { TextArea } from '@dashflowx/core'


export default function DisabledTextArea() {
  return (
    <TextArea 
      lable="Read Only"
      placeholder="This field is disabled..."
      rows={4}
      disabled={true}
    />
  )
}

Preview:

Large TextArea

import { TextArea } from '@dashflowx/core'


export default function LargeTextArea() {
  return (
    <TextArea 
      lable="Long Text"
      placeholder="Enter a long message..."
      rows={8}
    />
  )
}

Preview:

Common Use Cases

Contact Form

const contactForm = (
  <TextArea 
    lable="Message"
    placeholder="Enter your message..."
    rows={4}
    required={true}
  />
);

Comment Section

const commentSection = (
  <TextArea 
    lable="Add Comment"
    placeholder="Write your comment..."
    rows={3}
  />
);

Description Field

const descriptionField = (
  <TextArea 
    lable="Description"
    placeholder="Enter description..."
    rows={5}
  />
);

Feedback Form

const feedbackForm = (
  <TextArea 
    lable="Feedback"
    placeholder="Share your feedback..."
    rows={6}
  />
);

Best Practices

1. Clear Labels

Use clear and descriptive labels for textareas.

// ✅ Good - Clear labels
<TextArea lable="Project Description" />


// ❌ Avoid - Unclear labels
<TextArea lable="Text" />

2. Appropriate Rows

Set appropriate number of rows based on expected content length.

// ✅ Good - Appropriate rows
<TextArea rows={4} /> // For comments
<TextArea rows={8} /> // For descriptions


// ❌ Avoid - Too few or too many rows
<TextArea rows={1} /> // For long content
<TextArea rows={20} /> // For short content

3. Helpful Placeholders

Use helpful placeholder text to guide users.

// ✅ Good - Helpful placeholders
<TextArea placeholder="Describe your project requirements..." />


// ❌ Avoid - Unhelpful placeholders
<TextArea placeholder="Enter text..." />

4. Required Field Indicators

Clearly indicate required fields.

// ✅ Good - Required indicator
<TextArea lable="Description" required={true} />


// ❌ Avoid - No required indicator
<TextArea lable="Description" />

5. Consistent Styling

Maintain consistent styling across textareas.

// ✅ Good - Consistent styling
<TextArea className="standard-textarea-style" />


// ❌ Avoid - Inconsistent styling
<TextArea className="random-styles" />

Customization

Custom Styling

You can customize the textarea appearance using CSS classes:

<TextArea 
  className="border border-gray-300 rounded-lg p-4"
  rows={4}
/>

Different Themes

Use different themes for different contexts:

// Light theme
<TextArea className="bg-white border-gray-200" />


// Dark theme
<TextArea className="bg-gray-900 border-gray-700 text-white" />


// Brand theme
<TextArea className="bg-blue-50 border-blue-200" />

Size Variations

Use different sizes for different emphasis levels:

// Small textarea
<TextArea rows={2} className="text-sm" />


// Standard textarea
<TextArea rows={4} className="text-base" />


// Large textarea
<TextArea rows={8} className="text-lg" />

Advanced Usage

Dynamic TextArea Content

Load textarea content dynamically:

const [textareaContent, setTextareaContent] = useState('');


useEffect(() => {
  // Load content from API
  loadTextareaContent().then(setTextareaContent);
}, []);

Character Count

Add character count functionality:

const [characterCount, setCharacterCount] = useState(0);


<TextArea 
  onChange={(e) => setCharacterCount(e.target.value.length)}
  maxLength={500}
/>
<div>Characters: {characterCount}/500</div>

Auto-resize TextArea

Implement auto-resizing textarea:

const autoResizeTextarea = (textarea) => {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
};


<TextArea 
  onInput={(e) => autoResizeTextarea(e.target)}
  rows={1}
/>
  • Input: For single-line text input
  • Form: For form containers
  • Label: For form labels
  • Button: For form actions
  • Card: For form containers

API Reference

For the complete API reference and advanced usage patterns, see the TextArea API documentation.

Edit this page on GitHub
previousSwitch