WPDS Documentation & Resources

Input Text Area

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

Bundle size: 3.56 kB

Install:

npm install @washingtonpost/wpds-ui-kit|Copy

Usage:

import { InputTextarea } from "@washingtonpost/wpds-ui-kit"|Copy

Storybook: View on Storybook

Source: View on Github

Anatomy

Note: Image is not to scale

Label
Value
Border
Browser Default drag icon

Options

Resize

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


Open in Playroom

Helper text

The text area has optional helper text.


Open in Playroom

Behavior

Default

The text area can resize by default.


Open in Playroom

Error


Open in Playroom

Success


Open in Playroom

Required


Open in Playroom

Guidance

Do not use textarea for single or short inputs

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


Open in Playroom

API Reference

InputTextarea

Prop	Description	Type	Default	Required
children	children	ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	CSS	----	False
defaultValue	The initial input element value for uncontrolled components	string	----	False
disabled	The underlying textarea element disabled attribute	boolean	----	False
error	if the element has an error	boolean	----	False
errorMessage	Text displayed below the input to describe the cause of the error	ReactNode	----	False
helperText	Text displayed below the input to provide additional context	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
placeholder	placeholder text	string	----	False
required	The input elements required attribute	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.	boolean \| "false" \| ({ "@sm"?: boolean \| "false"; "@md"?: boolean \| "false"; "@lg"?: boolean \| "false"; "@xl"?: boolean \| "false"; "@xxl"?: boolean \| "false"; "@notSm"?: boolean \| "false"; "@notMd"?: boolean \| "false"; ... 17 more ...; "@initial"?: boolean \| "false"; } & { ...; })	----	False