Skip to main content
Design system

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

  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

InputTextarea

PropDescriptionTypeDefaultRequired
cssWPDS 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
defaultValueThe initial input element value for uncontrolled components
string
----False
disabledThe underlying textarea element disabled attribute
enum
boolean
----False
errorif the element has an error
enum
boolean
----False
errorMessageText displayed below the input to describe the cause of the error
enum
ReactNode
----False
helperTextText displayed below the input to provide additional context
enum
ReactNode
----False
labelLabel (use instead of Placeholder)
string
----
True
idAn id attribute to allow the <InputTextarea> to be associated with a <label> element for accessibility purposes
string
----
True
nameA name attribute to set the name of the associated data point submitted to the server when the form is submitted.
string
----
True
onBlurCallback executed when the input fires a blur event
FocusEventHandler<HTMLTextAreaElement>
----False
onChangeCallback executed when the input fires a change event
(event: ChangeEvent<HTMLTextAreaElement>) => void
----False
onFocusCallback executed when the input fires a focus event
FocusEventHandler<HTMLTextAreaElement>
----False
placeholderplaceholder text
string
----False
requiredThe input elements required attribute
enum
boolean
----False
valueThe input element value for controlled components
string
----False
canResizeEnable to allow for the text area to be resized by the user.
enum
boolean | false
----False