TextAreaA multi-line text input field with support for labels and helper text.

Label(optional)

Helper text

Label(optional)

The TextArea component provides a multi-line text input with support for labels, helper text, and error states. It can be used in both controlled and uncontrolled modes.

Installation

Install the component from your command line.

npm install @raystack/apsara

import { TextArea } from '@raystack/apsara/v1'

<TextArea
  label="Label"
  placeholder="Enter your text here"
  helperText="Optional helper text"
/>

TextArea Props

The TextArea component accepts the following props:

label: Text label displayed above the textarea
isOptional: Boolean indicating if the field is optional (default: false)
helperText: Helper text displayed below the textarea
error: Boolean to show error state
width: Custom width for the textarea container (string | number, default: "200px")
value: Controlled value for the textarea
onChange: Change handler for controlled usage
className: Additional CSS class names
All standard HTML textarea attributes

Basic Usage

The most basic usage of TextArea with just a label and placeholder.

Optional Field

TextArea with optional indicator and helper text.

Error State

TextArea in error state with custom styling.

Controlled Usage

Example of TextArea in controlled mode.

Custom Width

TextArea with custom width specification.