Design system

Input Text Area

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

Bundle size: NaN undefined
Install:
npm install @washingtonpost/wpds-input-textarea
|Copy
Usage:
import { InputTextarea } from "@washingtonpost/wpds-input-textarea"
|Copy

Anatomy

Note: Image is not to scale

  1. Label
  2. Value
  3. Border
  4. Browser Default drag icon

Options

Resize

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

Helper text

The text area has optional helper text.


Behavior

Default

The text area can resize by default.

Error

Success

Required


Guidance

Do not use textarea for single or short inputs

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

API Reference

PropTypeDefaultRequired
defaultValue
string
----False
disabled
enum
boolean
----False
error
enum
boolean
----False
errorMessage
enum
ReactNode
----False
helperText
enum
ReactNode
----False
label
string
----
True
id
string
----
True
name
string
----
True
onBlur
FocusEventHandler<HTMLTextAreaElement>
----False
onChange
(event: ChangeEvent<HTMLTextAreaElement>) => void
----False
onFocus
FocusEventHandler<HTMLTextAreaElement>
----False
required
enum
boolean
----False
value
string
----False
canResize
enum
boolean | false
----False