Textarea

A multi-line text control that grows with its content (CSS field-sizing, so a fixed height in browsers without it). Works alone or inside a Field, with the same labelling, validation and data attributes as Input; set rows or a max height with classes.

Installation

npx nuecrea-ui add textarea

Usage

import * as Field from '@/components/ui/field';
import { Textarea } from '@/components/ui/textarea';

export default function TextareaStory() {
  return (
    <main className="grid max-w-sm gap-6">
      <Field.Root validationMode="onBlur">
        <Field.Label>Bio</Field.Label>
        <Textarea
          required
          minLength={10}
          placeholder="A few words about you"
        />
        <Field.Description>Shown on your profile. Grows as you type.</Field.Description>
        <Field.Error match="valueMissing">Write a short bio.</Field.Error>
        <Field.Error match="tooShort">Use at least 10 characters.</Field.Error>
      </Field.Root>
      <Field.Root disabled>
        <Field.Label>Notes</Field.Label>
        <Textarea defaultValue="Managed by your admin." />
      </Field.Root>
    </main>
  );
}

API reference

Textarea

The textarea. Uses native constraint validation; Angular also reads reactive and signal forms errors. Renders <textarea>.

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Initial value when uncontrolled.
`disabled`	`boolean`	`false`	Disables the input.

Event	Payload	Description
`onValueChange`	`string`	Fired on every input.

Data attribute	Present when
`data-disabled`	the field is disabled
`data-valid`	validated and valid
`data-invalid`	validated and invalid, or forced invalid
`data-dirty`	the value differs from the initial value
`data-touched`	the control has been blurred
`data-filled`	the control has a value
`data-focused`	the control is focused