TextArea

A multi-line text input field.

Anatomy

Import and assemble the component:

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

3<TextArea placeholder="Enter text" />

For labels, helper text, and error messages, wrap with Field:

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

3<Field label="Bio" helperText="Tell us about yourself" error={errors.bio?.message}>
4  <TextArea placeholder="Write something..." />
5</Field>

API Reference

Renders a multi-line text input. For label, helper text, and error support, use with Field.

Prop

Type

Examples

Basic Usage

A basic TextArea with a placeholder.

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

With Field

Use Field to add label, helper text, and error handling.

1<Flex direction="column" gap="medium" style={{ width: 400 }}>
2  <Field label="Bio" optional helperText="Tell us about yourself">
3    <TextArea placeholder="Write something..." />
4  </Field>
5  <Field label="Comments" required error="This field is required">
6    <TextArea placeholder="Enter comments" />
7  </Field>
8</Flex>

Controlled Usage

Example of TextArea in controlled mode.

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

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

Custom Width

TextArea with custom width specification.

1<TextArea width="300px" placeholder="This textarea is 300px wide" />

Accessibility

  • Use with Field for automatic label association and error linking
  • Required state is communicated via aria-required
  • Invalid state is communicated via aria-invalid