Textarea

A multi-line text input.

Overview

Text that runs to a sentence or a paragraph: a review, a note, a message.

Long text

Do

What did you find? How were the prices?

import { Field, Textarea } from "@hackcove/ui";

<Field label="Review" htmlFor="do-review" hint="What did you find? How were the prices?">
  <Textarea id="do-review" rows={4} />
</Field>
Text that runs to a paragraph is a Textarea in a Field, so the person can see what they wrote.
Don't

What did you find? How were the prices?

import { Field, Input } from "@hackcove/ui";

<Field label="Review" htmlFor="dont-review" hint="What did you find? How were the prices?">
  <Input id="dont-review" />
</Field>
An Input is one line: a paragraph typed into it scrolls out of sight.

Usage

  • Put a Textarea in a Field, as with an Input.
  • rows is 3 unless you set it; set more for a long answer.
  • size and width are the same choices as on Input.
  • One line of text is an Input.

Accessibility

  • A Textarea is a native <textarea>: it takes name, required, disabled, maxLength and the aria-* props.
  • The focus ring comes from the component.

API

Textarea

A multi-line text input, styled like Input. rows defaults to 3. Takes size and width too.

size

sm is compact, text-xs with less padding, for dense forms and table rows.

Type
"sm" | "md"
Default
md
width

full (default) fills the parent; fill grows to fill the room left in a row beside other items (it can shrink to nothing, so buttons stay on the line); xs, sm, md, lg are fixed; auto is as wide as its content.

Type
"auto" | "sm" | "md" | "lg" | "xs" | "fill" | "full"
Default
full