Forms

Textarea

Server Component

Multi-line auto-sizing text field.

Import

tsx

import { Textarea } from "@cronus-ui/ui";

bash

npx cronus-ui add textarea

Examples

Default

A multi-line text input.

tsx

<Textarea placeholder="Tell us what you're building…" rows={4} />

Invalid

An invalid textarea paired with a FieldError.

Bio

This value isn't allowed.

tsx

<Field>
  <FieldLabel htmlFor="bio">Bio</FieldLabel>
  <Textarea
    id="bio"
    invalid
    rows={4}
    defaultValue="…"
    aria-describedby="bio-err"
  />
  <FieldError id="bio-err">This value isn't allowed.</FieldError>
</Field>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 2/2Pixel diff 0 pxLogic 1/1Parity scoreboard

empty.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component TextareaEmpty layout:inline style:textarea {
  aria-label:"Bio"
  label "Write a bio"
  text "Write a bio"
}

page "/audit/textarea/empty" type:custom {
  use TextareaEmpty
}

invalid.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component TextareaInvalid layout:inline style:textarea {
  invalid:true
  aria-label:"Bio"
  label "Write a bio"
  text "Write a bio"
}

page "/audit/textarea/invalid" type:custom {
  use TextareaInvalid
}

API Reference

Generated from the component's exported types.

TextareaProps

Extends TextareaHTMLAttributes<HTMLTextAreaElement>

Prop	Type	Default	Description
`invalid`	`boolean`	`false`	Marks the control invalid and applies the error ring.
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Uncontrolled initial value.
`onChange`	`(event: ChangeEvent<HTMLTextAreaElement>) => void`	—	Called when the value changes.
`placeholder`	`string`	—	Placeholder shown when the value is empty.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`name`	`string`	—	Submitted name when used in a form.
`rows`	`number`	—	—
`className`	`string`	—	Additional class names merged onto the root.