Textarea

A textarea takes several lines of text from users, such as a note, a reason or a message. It accepts every attribute of the native textarea element, fills the width of its container and grows with the text that users enter. A label names the text that the textarea asks for, and htmlFor on the label refers to the id of the textarea, so a click on the label moves the focus into the textarea.

UsageCopy Anchor Link

import { Field, FieldLabel } from "@biem/ui/components/ui/field";
import { Textarea } from "@biem/ui/components/ui/textarea";

export function TextareaDefault() {
	return (
		<div className="w-full max-w-sm">
			<Field>
				<FieldLabel htmlFor="delivery-instructions">Delivery instructions</FieldLabel>
				<Textarea id="delivery-instructions"/>
			</Field>
		</div>
	);
}

ExamplesCopy Anchor Link

With PlaceholderCopy Anchor Link

Some entries are easier to write when users know what to include, such as the details a complaint needs. While the textarea is empty, placeholder offers such a hint, and the hint disappears as soon as users type, so the label still names what the textarea asks for.

Default ValueCopy Anchor Link

Prepared text spares users from writing the same words again, such as the standard note on a recurring order. With defaultValue the textarea starts with that text, and users adjust only what differs this time.

ControlledCopy Anchor Link

Sometimes the application needs the text while users are still writing it, for example to save a draft or to allow sending only once there is something to send. Through value and onChange it holds the text itself, so other parts of the interface can read, replace or clear it.

DisabledCopy Anchor Link

Not every note applies to every order, such as a note for the courier when users collect the goods in the store. Marked as disabled, the textarea accepts neither focus nor input and exposes its state to assistive technology. Its text also stays out of the submitted form, so the order carries no note that no longer applies.

Read-OnlyCopy Anchor Link

Approved texts, such as a statement that a store manager has signed, belong in front of users without being open to change. Unlike a disabled textarea, one with readOnly stays focusable, so users reach it with the keyboard, and the form submits its text together with the other values.

InvalidCopy Anchor Link

Before a form goes out, users need to see which text still falls short, such as a report that lacks a required detail. Once aria-invalid is set, the textarea shows the error and reports it to assistive technology, so users find the entry that needs their attention.

API ReferenceCopy Anchor Link