Textarea

Textareas are stylized form controls with the ability of controling validation. Text Field Design Guidelines.

Description for the textarea.

Edit the code below to see your changes live!

API

Supports all native <textarea /> element attributes.

Textarea

Prop Name
Type
Default
Description
descriptionstring | FormControlDescription

Append a description to the textarea field.

errorstring | string[] | FormControlError | FormControlError[]

Displays an error message for the field.

labelstring | FormControlLabel

Label element for textareas. Component with auto generate id's for the accessibility API.

labelIdstring

Appends an id to the generated label element.

rows1 | 2 | 3 | 4 | 5 | 6 | 73

Determines the intial height via HTML's row property.

resizebooleantrue

Determines if the textarea is resizable vertically.

Props ending with * are required

Error State

Textareas allow you to pass in an error message that will control the styles of an input. The logic on the input can be controlled with the onChange prop.

Description needs to be at least 64 characters long.

Field needs to contain at least 64 characters.

Edit the code below to see your changes live!

Controlling Rows

By default, a Textarea displays with 3 rows. In order to set the intial amount of rows, pass in the rows prop. There can only be a maximum of 7 rows.

Textarea with 5 rows.

Edit the code below to see your changes live!

Resizable

You can also control whether Textarea components are resizeable. Resizing is only available on the vertical axis.

Edit the code below to see your changes live!

Beta