TextArea

Multi-line text input field with optional character counter.

Examples

Default

Notes

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

Auto Complete

Street addressAllows the browser to suggest a saved street address.

<TextArea
  label="Street address"
  value=""
  placeholder="Street and apartment number"
  rows={4}
  autoComplete="street-address"
  htmlName="street-address"
  description="Allows the browser to suggest a saved street address."
/>

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" />

Read Only

Notes

This content can be reviewed but not edited.

<TextArea
  label="Notes"
  value="This content can be reviewed but not edited."
  placeholder="Add notes"
  rows={4}
  isReadOnly
/>

Auto Grow

NotesGrows with its content instead of scrolling.

Client reported improved sleep since the last session. Discussed strategies for managing work stress, including scheduled breaks. Reviewed the thought record from last week; identified two recurring themes. Plan: continue weekly sessions and revisit the sleep log next time.

<TextArea
  label="Notes"
  value={LONG_NOTE}
  placeholder="Add notes"
  rows={undefined}
  minRows={3}
  description="Grows with its content instead of scrolling."
/>

Auto Grow With Max Rows

NotesGrows up to five rows, then scrolls.

Client reported improved sleep since the last session. Discussed strategies for managing work stress, including scheduled breaks. Reviewed the thought record from last week; identified two recurring themes. Plan: continue weekly sessions and revisit the sleep log next time.

<TextArea
  label="Notes"
  value={LONG_NOTE}
  placeholder="Add notes"
  rows={undefined}
  minRows={2}
  maxRows={5}
  description="Grows up to five rows, then scrolls."
/>

API

TextArea

Multi-line text input field with optional character counter.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
autoComplete	TextareaHTMLAttributes<HTMLTextAreaElement>['autoComplete']	—	Native browser autofill hint. Omitted by default.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
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	—
rows	number	3	Number of visible text rows. The user can resize the textarea vertically.
minRows	never	—
maxRows	never	—

When isOptional: false, isRequired: false

Prop	Type	Default	Description
autoComplete	TextareaHTMLAttributes<HTMLTextAreaElement>['autoComplete']	—	Native browser autofill hint. Omitted by default.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
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	—
rows	never	—
minRows	number	3	Grows the textarea with its content, starting at this many rows. Setting minRows or maxRows turns on auto-grow.
maxRows	number	—	Rows the textarea grows to before it scrolls. Unbounded by default.

When isOptional: true, isRequired: false

Prop	Type	Default	Description
autoComplete	TextareaHTMLAttributes<HTMLTextAreaElement>['autoComplete']	—	Native browser autofill hint. Omitted by default.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
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	—
rows	number	3	Number of visible text rows. The user can resize the textarea vertically.
minRows	never	—
maxRows	never	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
autoComplete	TextareaHTMLAttributes<HTMLTextAreaElement>['autoComplete']	—	Native browser autofill hint. Omitted by default.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
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	—
rows	never	—
minRows	number	3	Grows the textarea with its content, starting at this many rows. Setting minRows or maxRows turns on auto-grow.
maxRows	number	—	Rows the textarea grows to before it scrolls. Unbounded by default.

When isOptional: false, isRequired: true

Prop	Type	Default	Description
autoComplete	TextareaHTMLAttributes<HTMLTextAreaElement>['autoComplete']	—	Native browser autofill hint. Omitted by default.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
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	—
rows	number	3	Number of visible text rows. The user can resize the textarea vertically.
minRows	never	—
maxRows	never	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
autoComplete	TextareaHTMLAttributes<HTMLTextAreaElement>['autoComplete']	—	Native browser autofill hint. Omitted by default.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
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	—
rows	never	—
minRows	number	3	Grows the textarea with its content, starting at this many rows. Setting minRows or maxRows turns on auto-grow.
maxRows	number	—	Rows the textarea grows to before it scrolls. Unbounded by default.