🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Textarea

A multi-line text input component for capturing longer form text

Installation

The Textarea component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Textarea component into your React component.

import { Textarea } from 'reacui';

Basic Usage

The Textarea component provides a styled multi-line text input.

Your message

<label htmlFor="basic-textarea" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Your message
</label>
<Textarea
  id="basic-textarea"
  placeholder="Type your message here..."
  rows={3}
/>

Textarea Sizes

Control the size of the textarea by adjusting the number of rows.

Small (2 rows)

Medium (4 rows)

Large (6 rows)

{/* Small */}
<label htmlFor="small-textarea" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Small (2 rows)
</label>
<Textarea id="small-textarea" rows={2} />

{/* Medium */}
<label htmlFor="medium-textarea" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Medium (4 rows)
</label>
<Textarea id="medium-textarea" rows={4} />

{/* Large */}
<label htmlFor="large-textarea" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Large (6 rows)
</label>
<Textarea id="large-textarea" rows={6} />

Textarea States

Textareas can be in different states such as default, disabled, or with validation states.

Default

Disabled

Error

This field is required

{/* Default */}
<label htmlFor="default-state" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Default
</label>
<Textarea
  id="default-state"
  placeholder="Type here..."
  rows={3}
/>

{/* Disabled */}
<label htmlFor="disabled-state" className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
  Disabled
</label>
<Textarea
  id="disabled-state"
  placeholder="This textarea is disabled"
  rows={3}
  disabled
/>

{/* Error */}
<label htmlFor="error-state" className="block text-sm font-medium text-red-700 dark:text-red-400 mb-1">
  Error
</label>
<Textarea
  id="error-state"
  placeholder="There is an error"
  rows={3}
  state="error"
/>
<p className="mt-1 text-sm text-red-600">This field is required</p>

With Character Count

Add a character counter to help users stay within character limits.

Your bio (max 200 characters)

0 / 200

<label htmlFor="counter-textarea" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Your bio (max 200 characters)
</label>
<Textarea
  id="counter-textarea"
  placeholder="Tell us about yourself..."
  rows={4}
  maxLength={200}
  showCount
/>

API Reference

The following props are available for the Textarea component.

Prop	Type	Default	Description
id	string	-	The id attribute of the textarea element
name	string	-	The name attribute of the textarea element
rows	number	3	Number of rows in the textarea
placeholder	string	-	Placeholder text displayed when the textarea is empty
value	string	-	The controlled value of the textarea
defaultValue	string	-	The initial value of the textarea
disabled	boolean	false	Whether the textarea is disabled
state	enum	'default'	The validation state: 'default', 'valid', or 'error'
maxLength	number	-	Maximum number of characters allowed
showCount	boolean	false	Whether to show the character count when maxLength is set
onChange	function	-	Callback function triggered when the textarea value changes