TextArea

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

Usage

1import { TextArea } from "@raystack/apsara";

TextArea Props

Prop

Type

Examples

Basic Usage

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

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

Error State

TextArea in error state with custom styling.

1<TextArea
2  label="Error TextArea"
3  error={true}
4  helperText="This field has an error"
5  placeholder="Enter your text here"
6/>

Controlled Usage

Example of TextArea in controlled mode.

1(function ControlledExample() {
2  const [value, setValue] = React.useState("");
3

4  return (
5    <TextArea
6      label="Controlled TextArea"
7      value={value}
8      onChange={(e) => setValue(e.target.value)}
9      helperText={`Current value: ${value.length} characters`}
10      placeholder="Type something..."
11    />
12  );
13})

Custom Width

TextArea with custom width specification.

1<TextArea
2  label="Custom Width"
3  width="300px"
4  placeholder="This textarea is 300px wide"
5/>