WPDS - Input Text Area

Input Text Area

Note: This component status is in draft and indicates the component is actively being worked on.

A text area lets users enter long form text which spans over multiple lines.

Install:

npm install @washingtonpost/wpds-input-textarea|Copy

Usage:

import { InputTextarea } from "@washingtonpost/wpds-input-textarea"|Copy

Anatomy

Note: Image is not to scale

The text area can prevent reize by setting canResize to false.


Open in Playroom

The text area has optional helper text.


Open in Playroom

The text area can resize by default.


Open in Playroom


Open in Playroom


Open in Playroom


Open in Playroom

Textarea are for multiline text such as a sentence or a paragraph.


Open in Playroom

Prop	Description	Type	Default	Required
defaultValue	The initial input element value for uncontrolled components	string	----	False
disabled	The underlying textarea element disabled attribute	enum boolean	----	False
error	if the element has an error	enum boolean	----	False
errorMessage	Text displayed below the input to describe the cause of the error	enum ReactNode	----	False
helperText	Text displayed below the input to provide additional context	enum ReactNode	----	False
label	Label (use instead of Placeholder)	string	----	True
id	An id attribute to allow the <InputTextarea> to be associated with a <label> element for accessibility purposes	string	----	True
name	A name attribute to set the name of the associated data point submitted to the server when the form is submitted.	string	----	True
onBlur	Callback executed when the input fires a blur event	FocusEventHandler<HTMLTextAreaElement>	----	False
onChange	Callback executed when the input fires a change event	(event: ChangeEvent<HTMLTextAreaElement>) => void	----	False
onFocus	Callback executed when the input fires a focus event	FocusEventHandler<HTMLTextAreaElement>	----	False
required	The input elements required attribute	enum boolean	----	False
value	The input element value for controlled components	string	----	False
canResize	Enable to allow for the text area to be resized by the user.	enum boolean \| false	----	False