Apsara

Documentation

Playground

Icons

TextArea

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

Usage

import { TextArea } from "@raystack/apsara/v1";
 
<TextArea
  label="Label"
  placeholder="Enter your text here"
  helperText="Optional helper text"
/>;

TextArea Props

PropTypeDefault
label
string
-
isOptional
boolean
false
helperText
string
-
error
boolean
-
width
string | number
"200px"
value
string
-
onChange
(value: string) => void
-
className
string
-

Examples

Basic Usage

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

<TextArea label="Basic TextArea" placeholder="Enter your text here" />

Error State

TextArea in error state with custom styling.

<TextArea
  label="Error TextArea"
  error={true}
  helperText="This field has an error"
  placeholder="Enter your text here"
/>

Controlled Usage

Example of TextArea in controlled mode.

(function ControlledExample() {
  const [value, setValue] = React.useState("");
 
  return (
    <TextArea
      label="Controlled TextArea"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      helperText={`Current value: ${value.length} characters`}
      placeholder="Type something..."
    />
  );
})

Custom Width

TextArea with custom width specification.

<TextArea
  label="Custom Width"
  width="300px"
  placeholder="This textarea is 300px wide"
/>

Previous

Text

Next

Toast

On this page