Text area

A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component.

Default

The default Text Area is displayed with a label and a counter. The default Text Area can also be displayed with a hint giving context to the user or other important advice on the component.

Storybook failed to load. Please connect to the VPN to access.

Validation

The validation displays an error message related to the restrictions of the text area.

When a user selects the text area and starts typing or changing content, the Text Area changes to the focus state. When validating the Text Areas in real-time, the hint switch to the error message.

Storybook failed to load. Please connect to the VPN to access.

Resizable

The Text Area can be displayed with a resize option. This option allows the user to resize the input area by height, and not by width due to the placement inside the grid.

Storybook failed to load. Please connect to the VPN to access.