Textarea

Use a textarea when the expected value needs more than one line. Pair it with a visible label and helpful guidance when the input has a specific format or purpose.

Import

import { Textarea } from "@workshop1/ui/components/textarea"

States

Set aria-invalid="true" when validation fails and place the associated message next to the field. Use disabled when the value cannot be edited in the current state.

Accessibility

Every textarea needs an accessible name. Prefer a visible Label connected with htmlFor; use aria-describedby when helper or error text provides additional context.

Best practices

• Keep the placeholder brief and never use it as the field label.
• Match the initial height to the expected amount of content.
• Preserve entered text when validation fails.