TextArea

Preview

The TextArea component is built with React Aria and styled using StyleX. It automatically handles layout composition for label, description, and validation error messages.

Import

import { TextArea } from '@moul-dev/ui';

Features

Label

The text area automatically renders an accessible <Label> element above the text area input when the label prop is provided.

<TextArea label="Bio" placeholder="Tell us about yourself..." />

Description

Use the description prop to display help text or guidelines below the text area input. This automatically wires up accessibility relationships so assistive technologies can read it.

<TextArea
  label="Comments"
  description="Please do not include sensitive personal information."
/>

Validation & FieldError

If the input is invalid, you can provide an error message using the errorMessage prop. This renders a <FieldError> component automatically when the field validation fails.

<TextArea
  label="Message"
  isRequired
  isInvalid
  errorMessage="Please enter your message."
/>

Standalone ErrorMessage

For manual or custom validation outside of the built-in errorMessage prop, you can import and render the standalone <ErrorMessage> component.

import { ErrorMessage } from '@moul-dev/ui';

<ErrorMessage>Invalid input description.</ErrorMessage>

Usage

Here is a basic example of a configured TextArea:

import { TextArea } from '@moul-dev/ui';

export default function Example() {
  return (
    <TextArea
      label="Description"
      placeholder="Briefly describe your project..."
      description="Max 500 characters."
      isRequired
      errorMessage="A description is required."
    />
  );
}

Props

TextArea Props

Default className: react-aria-TextField