TextArea

A multi-line text input field with size and variant options.

Anatomy

Import and assemble the component:

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

3<TextArea placeholder="Enter text" />

For labels, description, and error messages, wrap with Field:

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

3<Field label="Bio" description="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, description, 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, description, and error handling.

1<Flex direction="column" gap="medium" style={{ width: 400 }}>
2  <Field label="Bio" required={false} description="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      description={`${value.length} characters`}
8    >
9      <TextArea
10        value={value}
11        onChange={(e) => setValue(e.target.value)}
12        placeholder="Type something..."
13      />
14    </Field>
15  );

Size Variants

TextArea comes in two sizes: large (default) and small.

1<Flex direction="column" gap="medium" style={{ width: 400 }}>
2  <TextArea placeholder="Large size (default)" />
3  <TextArea placeholder="Small size" size="small" />
4</Flex>

Visual Variants

TextArea supports default and borderless visual variants.

1<Flex direction="column" gap="medium" style={{ width: 400 }}>
2  <TextArea placeholder="Default variant" />
3  <TextArea placeholder="Borderless variant" variant="borderless" />
4</Flex>

Custom Rows

TextArea defaults to 3 visible rows. Use the rows prop to adjust.

1<Flex direction="column" gap="medium" style={{ width: 400 }}>
2  <TextArea placeholder="Default (3 rows)" />
3  <TextArea placeholder="6 rows" rows={6} />
4</Flex>

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
  • Content is scrollable when text exceeds the visible rows