Textarea

Textareas allow users to enter multiple lines of text.

Textarea

The textarea component lets users enter and edit multiple lines of text.

Textarea user inputFirst Name (optional)LabelLabel

Usage

The Textarea component should be used to let users enter multiple lines of text. It typically appears in Forms and Modals, however can be used wherever the requirement for multiple lines of text exists. If you require the user to enter a single line of text, use the Text Input component instead.

The textarea should contain a concise message, communicating to the user the expected content. To ensure there is appropriate readability of the entered content, try to make the Textarea container stretch to the full width of its parent.

Anatomy

Textarea user inputFirst Name (optional)
  1. Label. The Label should be used to describe to the user what the desired input should be. Every textarea should have a text label.
  2. User Input. The User Input is the text the user has entered into the Textarea.
  3. Container. The Container wraps the entire component.

States

Textarea user inputFirst Name (optional)LabelLabel

The Textarea has 3 states - default, active, and filled.

Variations

The textarea comes in two variations - fixed and resizable. The fixed version of the Textarea cannot be resized by the user, whereas the resizable one can. Note: Whilst the resizable Textarea can be resized by the user, it can only be changed on the y-axis. This is to prevent the interface breaking when the textarea is stretched outside of its parent container.

The `TextArea` component can be used to capture multiline text a form. Like other form components, this component can be used either on it's own with values and onChange handlers passed to it, or with Formik by using the variation of the component enhanced to with it.

Example with Formik

<Formik 
  initialValues={initialValues} 
  onSubmit={onSubmit} 
  validationSchema={validationSchema}
>
<Form>
   <Field
      name="description"
      component={FormComponents.TextArea}
      label="Description"
    />
</Form>
</Formik>

Properties

The TextArea component simply displays a field with the specified value. In order ot allow the user to make changes to the field content a 'onChange' property must accept the new field value and update the state for the form it belongs to and cause a re-render to take place with the updated value passed back to the field to display.

TextArea
NameTypeRequiredDefaultDescription
autoFocusbooleanFalsen/aMark the field with the autofocus property causing the browser to focus on the field when the page loads.
classNamestringFalsen/aOptional additional css class to associate with the component wrapper
isDisabledbooleanFalsefalseMark the field as disabled/inactive
footnotestringFalsen/aA message to display below the field
idstringFalseunique idProvide the ID for a field and tie it to its label. If one is not provided then a unique id will be created
labelstringFalsen/aIdeally a field should include a label to help the user understand what the field is for and help screen readers
namestringFalsen/aThe field name
onBlurReact.FormEvent<Element>Truen/aCalled when the field loses focus
onChangeReact.ChangeEvent <HTMLTextAreaElement>Truen/aCalled when the field value changes
placeholderstringFalsen/aIf a label is not provided then a placeholder should be.
valuestringFalsen/aThe field current value