TextArea
TextArea
is a multi-line plain-text input for free-form text.TextAreaField
is a field element that wrapsTextArea
with label, helper, and validation text.- Use
CharacterCount
when enforcing character limits in order to provide instant user feedback.
TextAreaField
will occupy the width of its parent by default- The native
rows
prop can be used to set the initial height of the input TextArea
is user-resizable by default using the drag handle in the lower-right corner
Disabled states should be used with caution.
It may sometimes be necessary to hide labels, but label text must still be made available for screen readers. This example uses visuallyHidden to visually hide the label.
Name | Type | Default | Description |
---|---|---|---|
after | ReactNode | Content shown after the input value. By default this content is not interactive and will ignore pointer events. Any interactive elements must be styled with pointer-events: auto; | |
before | ReactNode | Content shown before the input value. By default this content is not interactive and will ignore pointer events. Any interactive elements must be styled with pointer-events: auto; | |
children Required | ReactNode | Individual options related to the group. | |
counter | ReactNode | Indicator of a limit placed on a field, e.g. maximum character count or remaining hours. Frequently used with CharacterCount . | |
disabled | boolean | If true , the element will be disabled. | |
helperText | ReactNode | Additional descriptive information for the input . | |
invalid | boolean | false | If true, the input will be shown in an invalid state. |
label Required | ReactNode | Label for the associated input . | |
name Required | string | Name of the input . Submitted with the form as part of a name/value pair. | |
optionalText | string | Text used to indicate that a field is not required. | |
validationText | ReactNode | Validation message associated with the input . |
TextArea can be tested by following the same patterns as TextField.