Textarea

v3.5.5 Edit this page

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

Loading examples...

Props

<Textarea>

Displays a multi-line text input box that the user can type into. This component is a stateless visual wrapper on top of the html <textarea> and takes many of the same props.

Name

Description

Type

Default

id

ID for the textarea element.

string

error

Show the input in an error visual state.

bool

fullWidth

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

bool

disabled

Disable interaction and change.

bool

noResize

Disable the browser resize functionality

bool

className

Class on the <textarea> element.

string

inputRef

Gives access to the input dom node

func

label

Optional label for the input.

string

errorMessage

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

node

helpMessage

Optional help text shown below the input.

node

tooltip

Optional tooltip shown via an icon next to the label.

node

tooltipPlacement

Positioning of tooltip.

one of [[object Object],[object Object],[object Object],[object Object]]

dangerouslyForceFocusStyling

Force the component to use its focus styles.

bool

dangerouslyForceHoverStyling

Force the component to use its hover styles.

bool

Labels and Help Text

Use InputGroup to attach a label and help text to 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