BDS

Textarea

Textareas collect longer, multi-line responses for messages, notes, descriptions, and feedback. Use them when users need more room than a single-line input provides.

Textarea

Bio is too long.

Features

  • Floating labels for compact, readable form layouts.
  • Built-in error messaging and invalid state styling.
  • Supports native textarea behavior including manual resize.
  • Consistent spacing, typography, and semantic token usage.

When to use

Use Textarea for longer, multi-line content such as comments, messages, bios, notes, and descriptions where a single-line input would feel cramped.

Accessibility

Keep labels meaningful, associate error text with fields, preserve visible keyboard focus, ensure resize does not hide content, and avoid using placeholder-only instructions for critical guidance.

Best Practices

Do

Use Clear Labels

Write labels like 'Your message' or 'Project description' so users understand the kind of response expected.

Keep Validation Close

Show validation guidance and errors directly beneath the field so people can correct issues without scanning the page.

Choose Textarea for Longer Content

Use Textarea when users need room for full sentences, notes, or explanations instead of squeezing them into a single line.

Provide Enough Visible Height

Size the field to show enough lines for the expected amount of content so users can review what they have written.

Don't

Use Vague Labels

Avoid labels like 'Details' when more specific wording such as 'Shipping instructions' would guide the user better.

Rely on Placeholder Text Alone

Do not place essential instructions only in placeholder text because it disappears once the field has content.

Collapse Long Responses Into a Single Line

Do not force messages, descriptions, or extended responses into a single-line input.

Show Premature Errors

Avoid displaying an error state before the user has had a fair chance to respond unless the flow explicitly requires it.

Make the Field Too Small

Do not size the textarea so tightly that writing or reviewing content becomes difficult.

Props API

NameTypeDescription
labelstringVisible floating label and default placeholder text.
errorstringShows validation message and error styles when provided.
idstringOptional explicit ID used to connect the textarea, label, and error message.
rowsnumberNative textarea sizing control for visible line count when needed.
...propsReact.TextareaHTMLAttributes<HTMLTextAreaElement>Supports native textarea attributes like required, disabled, defaultValue, name, and maxLength.