Textarea

Textarea

Default

Notes

import { Textarea } from '@eekodigital/raster';

<Textarea name="notes" rows={4} placeholder="Add notes…" />

Error state

Description

<Textarea name="description" hasError rows={3} placeholder="Description required" />

Disabled

NotesRead-only content

<Textarea name="notes" defaultValue="Read-only content" disabled rows={3} />

TextareaField

Default

Notes

import { TextareaField } from '@eekodigital/raster';

<TextareaField label="Notes" name="notes" rows={4} />

With hint

NotesAdd any observations about this criterion.

<TextareaField label="Notes" name="notes" hint="Add any observations about this criterion." rows={4} />

With error

NotesError: Notes cannot be empty.

<TextareaField label="Notes" name="notes" error="Notes cannot be empty." rows={4} />

Character count

Pass maxLength to display a live character counter. It switches to error styling when the limit is exceeded.

DescriptionDescribe the issue in detail200 characters remaining

<TextareaField label="Description" maxLength={200} hint="Describe the issue in detail" />

Short noteThis text is too long and will overflow the limit29 characters too many

<TextareaField label="Short note" maxLength={20} defaultValue="This text is too long and will overflow the limit" />

Props

Textarea

Prop	Type	Default	Description
hasError	boolean	false	Applies error styling.
…props	TextareaHTMLAttributes	—	All native <textarea> attributes.

TextareaField

Prop	Type	Description
label	string	Visible label text.
hint	string	Optional hint text below the label.
error	string	Validation error message.
maxLength	number	Enables the live character counter when set.
…props	TextareaHTMLAttributes	All native textarea attributes.