Skip to main content

​
Overview

TextArea is a form input component that allows users to enter multi-line text. It supports validation, help messages, and multiple size variants.

​
Basic Usage

import { TextArea } from 'grauity';
import { useState } from 'react';

function MyForm() {
  const [value, setValue] = useState('');

  return (
    <TextArea
      name="description"
      label="Description"
      placeholder="Enter a description..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
      rows={4}
    />
  );
}

​
With Validation

import { TextArea } from 'grauity';
import { useState } from 'react';

function ValidatedTextArea() {
  const [comment, setComment] = useState('');
  const [error, setError] = useState('');

  const handleBlur = () => {
    if (comment.length < 10) {
      setError('Comment must be at least 10 characters');
    } else {
      setError('');
    }
  };

  return (
    <TextArea
      name="comment"
      label="Comment"
      placeholder="Share your thoughts..."
      value={comment}
      onChange={(e) => setComment(e.target.value)}
      onBlur={handleBlur}
      errorMessage={error}
      helpMessage="Minimum 10 characters"
      maxLength={500}
      isRequired
      rows={6}
    />
  );
}

​
Sizes

TextArea comes in four sizes: small, medium (default), large, and extra-large. 
<TextArea name="small" size="small" placeholder="Small (32px min-height)" rows={3} />
<TextArea name="medium" size="medium" placeholder="Medium (40px min-height)" rows={3} />
<TextArea name="large" size="large" placeholder="Large (48px min-height)" rows={3} />
<TextArea name="xlarge" size="extra-large" placeholder="Extra Large (56px min-height)" rows={3} />

​
Character Count

import { TextArea } from 'grauity';
import { useState } from 'react';

function CharacterLimitedTextArea() {
  const [value, setValue] = useState('');

  return (
    <TextArea
      name="bio"
      label="Bio"
      placeholder="Tell us about yourself"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      maxLength={200}
      helpMessage="Brief description for your profile"
      rows={4}
    />
  );
}
When maxLength is set, a character counter is automatically displayed alongside the help message.

​
Props

​
name
string
required
The name of the textarea field. Used for form submission and identification.
​
label
string
The label displayed above the textarea.
​
placeholder
string
Placeholder text displayed when the field is empty.
​
value
string
default:"''"
The current value of the textarea.
​
size
string
default:"'medium'"
The size of the textarea. Options: 'small' | 'medium' | 'large' | 'extra-large'
​
color
string
default:"'brand'"
The color theme for the field. Options: 'brand' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
​
rows
number
default:3
The number of visible text rows.
​
cols
number
default:4
The visible width of the textarea in average character widths.
​
isRequired
boolean
default:false
Whether the field is required. Displays a required indicator next to the label.
​
isDisabled
boolean
default:false
Whether the textarea is disabled.
​
isReadOnly
boolean
default:false
Whether the textarea is read-only.
​
errorMessage
string
Error message to display when the field is invalid.
​
helpMessage
string
Helper text displayed below the textarea.
​
maxLength
number
Maximum number of characters allowed. Shows character count when set.
​
autoComplete
string
default:"'on'"
HTML autocomplete attribute.
​
autoFocus
boolean
default:false
Whether the field should autofocus on mount.
​
onChange
function
Callback fired when the textarea value changes.
(event: React.ChangeEvent<HTMLTextAreaElement>) => void
​
onBlur
function
Callback fired when the textarea loses focus.
(event: React.FocusEvent<HTMLTextAreaElement>) => void
​
onClick
function
Callback fired when the textarea is clicked.
(event: React.MouseEvent<HTMLTextAreaElement>) => void
​
className
string
Additional CSS class name for the container.

​
TypeScript

import { TextAreaProps } from 'grauity';

type VARIANTS = 'small' | 'medium' | 'large' | 'extra-large';
type TextAreaColors = 'brand' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';

​
Accessibility

  • Uses semantic <textarea> element
  • Properly associated <label> element
  • Required fields are indicated with aria-required
  • Error messages are announced to screen readers
  • Keyboard accessible (Tab, Shift+Tab for navigation)

​
Source

View the source code on GitHub:

Build docs developers (and LLMs) love

Get started for freeTalk to us