TextArea

Multi-line text input field with optional character counter.

Examples

Default

Notes

<TextArea label="Notes" value="" placeholder="Add notes" rows={4} />

With Counter

Notes

Draft note

10/120

<TextArea
  label="Notes"
  value="Draft note"
  placeholder="Add notes"
  rows={4}
  maxLength={120}
/>

Over Limit

Notes

This text intentionally exceeds the character limit

51/20

<TextArea
  label="Notes"
  value="This text intentionally exceeds the character limit"
  placeholder="Add notes"
  rows={4}
  maxLength={20}
/>

With Description

NotesMarkdown is supported.

<TextArea
  label="Notes"
  value=""
  placeholder="Add notes"
  rows={4}
  description="Markdown is supported."
/>

With Start Icon

Notes

<TextArea
  label="Notes"
  value=""
  placeholder="Add notes"
  rows={4}
  startIcon={MessageSquare}
/>

Label Hidden

Notes

<TextArea
  label="Notes"
  value=""
  placeholder="Add a comment..."
  rows={4}
  isLabelHidden
/>

Disabled

Notes

Read-only content

<TextArea
  label="Notes"
  value="Read-only content"
  placeholder="Add notes"
  rows={4}
  isDisabled
/>

Loading

Notes

<TextArea label="Notes" value="" placeholder="Add notes" rows={4} isLoading />

Required

Notes · Required

<TextArea
  label="Notes"
  value=""
  placeholder="Add notes"
  rows={4}
  isRequired
/>

Error

Notes

Notes cannot be empty.

<TextArea
  label="Notes"
  value=""
  placeholder="Add notes"
  rows={4}
  status={{message: 'Notes cannot be empty.', type: 'error'}}
/>

Warning

Notes

Content may be too brief.

<TextArea
  label="Notes"
  value=""
  placeholder="Add notes"
  rows={4}
  status={{message: 'Content may be too brief.', type: 'warning'}}
/>

Small

Notes

<TextArea label="Notes" value="" placeholder="Add notes" rows={3} size="sm" />

Large

Notes

<TextArea label="Notes" value="" placeholder="Add notes" rows={5} size="lg" />

API

TextArea

Multi-line text input field with optional character counter.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the textarea wrapper.
data-testid	string	—	Test ID applied to the textarea element.
description	ReactNode	—	Supporting text displayed below the label.
hasAutoFocus	boolean	false	Whether to focus the textarea on mount.
hasSpellCheck	boolean	true	Whether the browser spellcheck is enabled.
htmlName	string	—	HTML name attribute.
isDisabled	boolean	false	Whether the textarea is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the textarea is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxLength	number	—	Maximum character count. Displays a counter when set.
onBlur	(event: FocusEvent<HTMLTextAreaElement>) => void	—	Called when the textarea loses focus.
onChange*	(value: string, event: ChangeEvent<HTMLTextAreaElement>) => void	—	Called with the next string value.
onFocus	(event: FocusEvent<HTMLTextAreaElement>) => void	—	Called when the textarea receives focus.
onPaste	(event: ClipboardEvent<HTMLTextAreaElement>) => void	—	Called when content is pasted into the textarea.
placeholder	string	—	Placeholder text.
ref	Ref<HTMLTextAreaElement>	—	Ref forwarded to the textarea element.
rows	number	3	Number of visible text rows.
size	"sm" | "md" | "lg"	'md'	Visual size.
startIcon	IconComponent	—	Icon shown before the textarea.
status	InputStatus	—	Validation status displayed below the textarea.
style	CSSProperties	—	Inline styles applied to the textarea wrapper.
value*	string	—	Controlled textarea value.
isOptional	false	—
isRequired	false	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the textarea wrapper.
data-testid	string	—	Test ID applied to the textarea element.
description	ReactNode	—	Supporting text displayed below the label.
hasAutoFocus	boolean	false	Whether to focus the textarea on mount.
hasSpellCheck	boolean	true	Whether the browser spellcheck is enabled.
htmlName	string	—	HTML name attribute.
isDisabled	boolean	false	Whether the textarea is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the textarea is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxLength	number	—	Maximum character count. Displays a counter when set.
onBlur	(event: FocusEvent<HTMLTextAreaElement>) => void	—	Called when the textarea loses focus.
onChange*	(value: string, event: ChangeEvent<HTMLTextAreaElement>) => void	—	Called with the next string value.
onFocus	(event: FocusEvent<HTMLTextAreaElement>) => void	—	Called when the textarea receives focus.
onPaste	(event: ClipboardEvent<HTMLTextAreaElement>) => void	—	Called when content is pasted into the textarea.
placeholder	string	—	Placeholder text.
ref	Ref<HTMLTextAreaElement>	—	Ref forwarded to the textarea element.
rows	number	3	Number of visible text rows.
size	"sm" | "md" | "lg"	'md'	Visual size.
startIcon	IconComponent	—	Icon shown before the textarea.
status	InputStatus	—	Validation status displayed below the textarea.
style	CSSProperties	—	Inline styles applied to the textarea wrapper.
value*	string	—	Controlled textarea value.
isOptional*	true	—
isRequired	false	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the textarea wrapper.
data-testid	string	—	Test ID applied to the textarea element.
description	ReactNode	—	Supporting text displayed below the label.
hasAutoFocus	boolean	false	Whether to focus the textarea on mount.
hasSpellCheck	boolean	true	Whether the browser spellcheck is enabled.
htmlName	string	—	HTML name attribute.
isDisabled	boolean	false	Whether the textarea is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the textarea is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxLength	number	—	Maximum character count. Displays a counter when set.
onBlur	(event: FocusEvent<HTMLTextAreaElement>) => void	—	Called when the textarea loses focus.
onChange*	(value: string, event: ChangeEvent<HTMLTextAreaElement>) => void	—	Called with the next string value.
onFocus	(event: FocusEvent<HTMLTextAreaElement>) => void	—	Called when the textarea receives focus.
onPaste	(event: ClipboardEvent<HTMLTextAreaElement>) => void	—	Called when content is pasted into the textarea.
placeholder	string	—	Placeholder text.
ref	Ref<HTMLTextAreaElement>	—	Ref forwarded to the textarea element.
rows	number	3	Number of visible text rows.
size	"sm" | "md" | "lg"	'md'	Visual size.
startIcon	IconComponent	—	Icon shown before the textarea.
status	InputStatus	—	Validation status displayed below the textarea.
style	CSSProperties	—	Inline styles applied to the textarea wrapper.
value*	string	—	Controlled textarea value.
isOptional	false	—
isRequired*	true	—