Textarea

Needs review
WCAG 2.2 evidence
RTL

Multi-line text field: label, a 120 px box that grows with the user's resize, an optional counter, helper text and an inline error. Built on React Aria TextField + TextArea: label, helper, counter and error are linked to the textarea (WCAG 1.3.1, 3.3.2), errors show an icon and text (1.4.1, 3.3.1) and appear on submit with focus moved to the field (4.1.3). Enter inserts a new line; paste, autofill and spell checking are never blocked (3.3.7, 3.3.8). Consumer duties: label, helper and error wording; a remainingLabel in the user's language.

import { Textarea } from "@nexera-ui/react";

Loading example…

6
examples: 32
props: 6
live controls: 1
platform: 14
WCAG criteria: 9
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

description

placeholder

isDisabledfalse

isReadOnlyfalse

isRequiredfalse

isInvalidfalse

Generated code

import { Textarea } from "@nexera-ui/react";

<Textarea />

Examples 5

The same examples as Storybook, rendered live. Open Code to copy one.

States

Semantic states: filled, isDisabled, isInvalid + errorMessage and read-only.

Loading example…

app.tsx

import { Textarea } from "@nexera-ui/react";

export function States() {
  return (
    <div className="flex flex-col gap-6">
      <Textarea
        placeholder="Add details for your manager"
        description="Visible to your manager and HR."
        maxLength={500}
        label="Filled"
        defaultValue="Attending a family wedding out of town. I can be reached by phone for anything urgent."
      />
      <Textarea
        placeholder="Add details for your manager"
        description="Visible to your manager and HR."
        maxLength={500}
        label="Disabled"
        isDisabled
      />
      <Textarea
        placeholder="Add details for your manager"
        description="Visible to your manager and HR."
        maxLength={500}
        label="Error"
        defaultValue="Wedding"
        isInvalid
        errorMessage="Add at least 10 characters."
      />
      <Textarea
        placeholder="Add details for your manager"
        description="Visible to your manager and HR."
        maxLength={500}
        label="Read-only"
        isReadOnly
        defaultValue="Approved by HR on 3 October."
      />
    </div>
  );
}

Counter

Counter: derived from maxLength ("count / max"), or your own text through counter. Near the limit the remaining count is announced politely after a pause in typing.

Loading example…

app.tsx

import { Textarea } from "@nexera-ui/react";

export function Counter() {
  return (
    <div className="flex flex-col gap-6">
      <Textarea
        placeholder="Add details for your manager"
        label="Summary"
        maxLength={40}
        description="Up to 40 characters."
      />
      <Textarea label="Notes" description="Your own counter text." counter="12 words" />
      <Textarea label="Without counter" description="No maxLength and no counter." />
    </div>
  );
}

Validation on submit

Validation on submit: the error appears with an icon, focus moves to the field and the error is read with it.

Loading example…

app.tsx

import { Form } from "react-aria-components";
import { Button, Textarea } from "@nexera-ui/react";

export function ValidationOnSubmit() {
  return (
    <Form
      className="flex flex-col gap-6"
      onSubmit={(event) => {
        event.preventDefault();
      }}
    >
      <Textarea
        label="Reason for leave"
        name="reason"
        isRequired
        minLength={10}
        maxLength={500}
        errorMessage="Add at least 10 characters."
      />
      <Button type="submit" className="self-start">
        Submit request
      </Button>
    </Form>
  );
}

Long label

Long labels and helper texts wrap; long words break inside the box.

Loading example…

app.tsx

import { Textarea } from "@nexera-ui/react";

export function LongLabel() {
  return (
    <div className="max-w-[12rem]">
      <Textarea
        placeholder="Add details for your manager"
        maxLength={500}
        label="Describe the reason for your leave request in as much detail as your manager needs"
        description="Visible to your manager, HR and the payroll team for this period."
        defaultValue="Supercalifragilisticexpialidocious-leave-request-reference-0042"
      />
    </div>
  );
}

Right to left

Right-to-left: label, counter and resize corner mirror; the counter uses the locale's digits.

Loading example…

app.tsx

import { Textarea } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <Textarea
      label="سبب الإجازة"
      placeholder="أضف تفاصيل لمديرك"
      description="مرئي لمديرك وللموارد البشرية."
      maxLength={500}
    />
  );
}

Props 32

Press "Try it" on a card to load that prop into the playground.

descriptionNexera

ReactNode

Helper text under the field, linked with aria-describedby. Shown when provided.

errorMessageNexera

ReactNode | ((validation: ValidationResult) => ReactNode)

Error text under the field, shown with an icon while the field is invalid and linked with aria-describedby. A function receives React Aria's validation result. Defaults to the browser's validation message.

placeholderNexera

string

Example text shown while the field is empty. Never the only label.

counterNexera

ReactNode

Counter text in the bottom-end corner of the box. Defaults to "count / maxLength" (locale digits) when maxLength is set; pass your own text (for example a word count) to replace it. Linked to the textarea with aria-describedby.

maxLengthNexera

number

Maximum number of characters (native maxlength). Shows the counter, and once fewer than 10 % (at least 5) characters remain, the remaining count is announced politely after the user pauses typing (WCAG 4.1.3).

remainingLabelNexera

(remaining: number) => string

Text announced near the limit, from the number of characters left. Translate it for your locale.

textAreaRefNexera

Ref<HTMLTextAreaElement>

Ref to the native <textarea> (the root ref points to the field wrapper).

classNameNexera

string

Extra classes for the root, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style of the root.

labelNexera

FieldLabelContent

Visible label, linked to the control by React Aria (WCAG 1.3.1, 3.3.2). Short noun, for example "Work email". Wraps instead of truncating. A placeholder is never a substitute for it. Not set: the field has no visible label. Not set: the field has no visible label of its own.

aria-labelNexera

string

Accessible name when it must differ from the visible label. Prefer the visible label (WCAG 2.5.3). Accessible name. Required when there is no visible label; translate it. Accessible name. Optional when aria-labelledby is set.

aria-labelledbyNexera

string

Id(s) of element(s) that name the field; wins over the visible label. Id(s) of element(s) that name the field; wins over aria-label. Id(s) of visible element(s) that name the field.

validationBehaviorReact Aria

"native" | "aria"

Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

enterKeyHintReact Aria

An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).

isDisabledReact Aria

boolean

Whether the input is disabled.

isReadOnlyReact Aria

boolean

Whether the input can be selected but not changed by the user.

isRequiredReact Aria

boolean

Whether user input is required on the input before form submission.

isInvalidReact Aria

boolean

Whether the value is invalid.

validateReact Aria

(value: string) => true | ValidationError | null

A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

valueReact Aria

string

The current value (controlled).

defaultValueReact Aria

string

The default value (uncontrolled).

onChangeReact Aria

(value: string) => void

Handler that is called when the value changes.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

autoCompleteReact Aria

string

Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).

minLengthReact Aria

number

The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).

inputModeReact Aria

Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).

autoCorrectReact Aria

string

An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).

spellCheckReact Aria

string

An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).

nameReact Aria

string

The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).

formReact Aria

string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

10 direct · 4 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
1.4.11Non-text ContrastLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
3.3.1Error IdentificationLevel A · tested directly
3.3.2Labels or InstructionsLevel A · tested directly
3.3.3Error SuggestionLevel AA · tested directly
3.3.7Redundant EntryLevel A · tested directly
3.3.8Accessible Authentication (Minimum)Level AA · tested directly
4.1.2Name, Role, ValueLevel A · tested directly
4.1.3Status MessagesLevel AA · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-invalid

Usage

<Textarea className="data-disabled:opacity-90 shadow-sm" />

Theme studio

Textarea

Try every prop. Copy the code.

Examples 5

States

Counter

Validation on submit

Long label

Right to left

Props 32

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components