@versini/ui-textarea

An accessible and feature-rich React textarea component built with TypeScript and TailwindCSS.

The TextArea component provides multi-line text input with comprehensive form features including validation states, helper text, character counting, and customizable styling options.

Table of Contents

• Features
• Installation
• Usage
• API

Features

• ♿ Accessible: WCAG compliant with proper labeling and keyboard navigation
• 🎨 Customizable: Multiple themes, sizes, and styling options
• 🔧 Form Integration: Built-in validation states and helper text
• 📊 Character Counting: Optional character limit with visual feedback
• 🌲 Tree-shakeable: Lightweight and optimized for bundle size
• 🔧 TypeScript: Fully typed with comprehensive prop definitions

Installation

npm install @versini/ui-textarea

Note: This component requires TailwindCSS and the @versini/ui-styles plugin for proper styling. See the installation documentation for complete setup instructions.

Usage

Basic TextArea

import { TextArea } from "@versini/ui-textarea";

function App() {
  return (
    <TextArea
      label="Message"
      name="message"
      placeholder="Enter your message here..."
      rows={4}
    />
  );
}

TextArea with Character Limit

import { TextArea } from "@versini/ui-textarea";

function App() {
  return (
    <TextArea
      label="Tweet"
      name="tweet"
      placeholder="What's happening?"
      maxLength={280}
      helperText="Share your thoughts"
      rows={3}
    />
  );
}

TextArea with Error State

import { TextArea } from "@versini/ui-textarea";

function App() {
  return (
    <TextArea
      label="Description"
      name="description"
      error
      helperText="Description is required"
      placeholder="Enter a description..."
    />
  );
}

API

TextArea Props

| Prop | Type | Default | Description | | ----------------- | ----------------------------------------------- | ---------- | -------------------------------------------- | | label | string | - | The label of the TextArea (required) | | name | string | - | The name of the TextArea (required) | | error | boolean | false | Whether the TextArea is in error state | | helperText | string | - | Text to add to the bottom of the TextArea | | helperTextOnFocus | boolean | false | Show helper text only when focused | | mode | "dark" \| "light" \| "system" \| "alt-system" | "system" | Theme mode | | focusMode | "dark" \| "light" \| "system" \| "alt-system" | "system" | Focus ring color mode | | labelHidden | boolean | false | Hide label visually but retain accessibility | | noBorder | boolean | false | Whether to render without border | | raw | boolean | false | Whether to render without styles |

Also supports all standard HTML textarea element attributes

Examples

Comment Form

import { TextArea } from "@versini/ui-textarea";
import { Button } from "@versini/ui-button";

function CommentForm() {
  return (
    <div className="space-y-4">
      <TextArea
        label="Add a comment"
        name="comment"
        placeholder="Share your thoughts..."
        rows={4}
        maxLength={500}
        helperText="Be respectful and constructive"
      />
      <Button variant="primary">Post Comment</Button>
    </div>
  );
}

Feedback Form

import { TextArea } from "@versini/ui-textarea";

function FeedbackForm() {
  return (
    <TextArea
      label="Feedback"
      name="feedback"
      placeholder="Tell us how we can improve..."
      rows={6}
      helperText="Your feedback helps us improve our service"
      helperTextOnFocus
    />
  );
}