Textarea is an input that allows the user to enter long form info and manually adjust the input size accordingly.

Best practices

  • Always allow the size of the text input box to reflect the length of the content you expect the user to enter. Use Input for a single line of text; use TextArea when you expect more than one sentence.
  • Display character limit/counter to set user expectations about input length.
  • Use clear and concise language for all labels.
  • Use help messaging to further clarify what the input is asking, never use icons for this purpose.
  • Ensure error messaging adds specific instructions on how to resolve an error.

Usage

import Textarea from '@nerdwallet/react-textarea';
<Textarea
value="John Doe"
onChange={this.handleOnChange}
/>

Loading examples...

<Textarea>

id

string

ID for the textarea element.


error

boolean

Show the input in an error visual state.


fullWidth

boolean

When true, sets width to 100% on the input.


disabled

boolean

Disable interaction and change.


noResize

boolean

Disable the browser resize functionality


className

string

Class on the <textarea> element.


inputRef

Function

Gives access to the input dom node


label

string

Optional label for the input.


errorMessage

node

Optional text to be shown indicating the user is in an error state.


helpMessage

node

Optional help text shown below the input.


tooltip

node

Optional tooltip shown via an icon next to the label.


tooltipPlacement

'top' | 'right' | 'bottom' | 'left'

Positioning of tooltip.


dangerouslyForceFocusStyling

boolean

Force the component to use its focus styles.


dangerouslyForceHoverStyling

boolean

Force the component to use its hover styles.

Labels and Help Text

Use InputGroup to attach a label and help text to Textarea.

import InputGroup from '@nerdwallet/react-input-group';
import Textarea from '@nerdwallet/react-textarea';
<InputGroup
label="First name"
input={
<Textarea {...} />
}
/>

Character Limit

There is a wrapper component, LimitedTextarea (limited-textarea.jsx) that takes a maxLength prop and provides a counter telling the user how much more they can type.

Props

In addition to the props defined by this component, any props <textarea> takes, such as name, value, onChange, etc., are accepted.

Maintainers

This component is maintained by the FEI team.

See Also