Components

Textarea

Use: Deployed English, Spanish

Textarea allows people to enter any type of text.

Usage

If you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers.
When using another type of input will make answering more difficult. For example, birthdays and other known dates are easier to type in than they are to select from a calendar picker.
When users want to be able to paste in a response.

Only show error validation messages or stylings after a user has interacted with a particular field.
Avoid using placeholder text that appears within a text field before a user starts typing. If placeholder text is no longer visible after a user clicks into the field, users will no longer have that text available when they need to review their entries. (People who have cognitive or visual disabilities have additional problems with placeholder text.)

Native onInput and onBlur events are available on this component. They can be used by adding the event handler to your component and it will then listen to the event and respond accordingly when the event fires.

Property	Attribute	Type	Default	Description
`enableAnalytics`	`enable-analytics`	`boolean`	`false`	Emit component-library-analytics events on the blur event.
`error`	`error`	`string`		The error message to render.
`label`	`label`	`string`		The label for the textarea.
`maxlength`	`maxlength`	`number`		The maximum number of characters allowed in the input. Negative and zero values will be ignored.
`name`	`name`	`string`		The name for the input.
`placeholder`	`placeholder`	`string`		The placeholder string.
`required`	`required`	`boolean`	`false`	Set the input to required and render the (Required) text.
`value`	`value`	`string`		The value of the textarea

Name	Description
`component-library-analytics`	The event used to track usage of the component. This is emitted when the textarea is blurred and `enableAnalytics` is true

Avoid placeholder text for accessibility reasons. Most browsers’ default rendering of placeholder text does not provide a high enough contrast ratio.