Textarea

The Textarea component allows you to create multi-line text inputs, to be used when the expected user input is more than one sentence.

It should be used within the Form Control component to provide an accessible label and error states.

Import

import { Textarea } from '@outfitio/outkit';

Usage

Resize behavior

The resize prop can be used change the Textarea resize behavior, to determine if the textarea can be resized vertically, horizontally, or not at all (none).

Disabled Textarea

Read Only Textarea

Invalid Textarea

Accessibility

• Screen readers convey information about textareas automatically through native HTML.
• Use the isDisabled prop to add the HTML disabled attribute to the textarea.
• Use the isReadOnly prop to add the HTML readonly attribute to the textarea.

Best Practice

Textareas should:

• Be used within the Form Control component to provide an accessible label and error state.
• Be clearly labeled so that it is obvious to users what they should enter into the field
• Be labeled as 'Optional' if the input is not required

Props

The Textarea composes the Input component