Skip to content

Textarea

Status: Stable

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.

Examples

Default

Placeholder

Error

Disabled

Props

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

<Textarea>

id

string
ID for the textarea element.

inputRef

(instance: HTMLTextAreaElement | null) => void | RefObject<HTMLTextAreaElement>
Gives access to the input dom node

noResize

boolean
Disable the browser resize functionality

label

string
A label for the input

className

string
Class on outer container element

disabled

boolean

error

boolean
Flag to indicate if input is in an error (red outline) state. Use in conjunction with errorMessage to display a red error message.

fullWidth

boolean

helpMessage

ReactNode
Optional help text shown below the input

errorMessage

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

tooltip

ReactNode
Optional tooltip shown via an icon next to the label

tooltipPlacement

"bottom" | "left" | "right" | "top"
Positioning of tooltip

defaultValue

string | number | Array<string>

placeholder

string

onFocus

FocusEventHandler<T>

onBlur

FocusEventHandler<T>

onChange

ChangeEventHandler<T>

name

string

value

string | number | Array<string>

autoComplete

string

maxLength

number

required

boolean

ref

(instance: any) => void | RefObject<any>