Textarea

A cross-platform React textarea component for multi-line text input. Includes error state and validation message support.

Installation

npm install @xsolla/xui-textarea

Demo

Basic Textarea

import * as React from "react";
import { TextArea } from "@xsolla/xui-textarea";

export default function BasicTextarea() {
  const [value, setValue] = React.useState("");

  return (
    <TextArea
      value={value}
      onChangeText={setValue}
      placeholder="Enter your message..."
    />
  );
}

Textarea Sizes

import * as React from "react";
import { TextArea } from "@xsolla/xui-textarea";

export default function TextareaSizes() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <TextArea size="xs" placeholder="Extra Small" />
      <TextArea size="sm" placeholder="Small" />
      <TextArea size="md" placeholder="Medium (default)" />
      <TextArea size="lg" placeholder="Large" />
      <TextArea size="xl" placeholder="Extra Large" />
    </div>
  );
}

Textarea with Error

import * as React from "react";
import { TextArea } from "@xsolla/xui-textarea";

export default function TextareaWithError() {
  const [value, setValue] = React.useState("");
  const maxLength = 100;

  return (
    <TextArea
      value={value}
      onChangeText={setValue}
      placeholder="Enter description..."
      errorMessage={
        value.length > maxLength
          ? `Maximum ${maxLength} characters allowed`
          : ""
      }
    />
  );
}

Anatomy

Import the component and use it directly:

import { TextArea } from "@xsolla/xui-textarea";

<TextArea
  value={text} // Controlled value
  onChangeText={setText} // Value change handler
  placeholder="Placeholder" // Placeholder text
  size="md" // Size variant
  disabled={false} // Disabled state
  errorMessage="Error text" // Error message below textarea
/>;

Examples

Comment Form

import * as React from "react";
import { TextArea } from "@xsolla/xui-textarea";
import { Button } from "@xsolla/xui-button";

export default function CommentForm() {
  const [comment, setComment] = React.useState("");

  const handleSubmit = () => {
    console.log("Comment:", comment);
    setComment("");
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <TextArea
        value={comment}
        onChangeText={setComment}
        placeholder="Write a comment..."
        size="md"
      />
      <Button onPress={handleSubmit} disabled={!comment.trim()}>
        Post Comment
      </Button>
    </div>
  );
}

Disabled Textarea

import * as React from "react";
import { TextArea } from "@xsolla/xui-textarea";

export default function DisabledTextarea() {
  return (
    <TextArea
      value="This content cannot be edited"
      disabled
      placeholder="Disabled textarea"
    />
  );
}

Character Counter

import * as React from "react";
import { TextArea } from "@xsolla/xui-textarea";

export default function TextareaWithCounter() {
  const [value, setValue] = React.useState("");
  const maxLength = 500;

  return (
    <div>
      <TextArea
        value={value}
        onChangeText={setValue}
        placeholder="Enter your bio..."
        errorMessage={
          value.length > maxLength ? "Character limit exceeded" : ""
        }
      />
      <div
        style={{
          textAlign: "right",
          fontSize: 12,
          color: value.length > maxLength ? "red" : "gray",
        }}
      >
        {value.length}/{maxLength}
      </div>
    </div>
  );
}

API Reference

TextArea

A multi-line text input component.

TextArea Props:

| Prop | Type | Default | Description | | :--------------- | :------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------ | | testID | string | — | Test ID for testing frameworks. On web this renders as data-testid; on React Native it renders as testID. | | value | string | - | The controlled value of the textarea. | | placeholder | string | - | Placeholder text when empty. | | onChangeText | (text: string) => void | - | Callback when text changes. | | size | "xl" \| "lg" \| "md" \| "sm" \| "xs" | "md" | Size of the textarea. | | disabled | boolean | false | Whether the textarea is disabled. | | errorMessage | string | - | Error message displayed below. | | aria-label | string | - | Accessible label. | | aria-describedby | string | - | ID of description element. | | id | string | - | HTML id attribute. | | testID | string | - | Test identifier. |

Padding by Size:

| Size | Padding | | :--- | :------ | | xl | 16px | | lg | 14px | | md | 12px | | sm | 10px | | xs | 10px |

Accessibility

• Uses native <textarea> element
• aria-invalid set when error message present
• aria-disabled for disabled state
• aria-describedby links to error message
• Error message has role="alert" for announcements
• Focus indicator follows WCAG guidelines