Textarea

Usage

Textarea enables users to enter multi-line text data.

Best practices

Do

Use textarea fields where the expected data is long.

Don't

Don’t use textarea when the expected data is shorter. Use the input instead.

Labels

Labels indicate what type of data the field needs. Having labels present gives us two major advantages:

• They are programmatically associated with the field, which means assistive technologies will read them when the user focuses on them.
• When the user click/tap on the label, the browser passes the focus to the field, which makes it easier for touch screens, and users with motor disabilities.

Important note

Labels should always be present, unless for those cases where the context and elements that surround the textarea make it clear what data is needed (e.g. a field in a chat). In those cases, make sure an aria-label is used.

Do

Use labels to specify the data required in the textarea.

Don't

Do not avoid labels as they are essential to the textarea completion and later understanding.

Do

Keep the label short and concise. Always use sentence case.

Don't

Avoid using long sentences or colons.

Placeholders

Use the placeholders to help users understand the format needed. They can never be a substitute for the label or hint because:

• They disappear as soon as the user interacts with the field.
• They usually do not meet a strong contrast ratio (+3:1 in our case).
• Screen readers do not read placeholders as they do labels.

Do

When using placeholders, write direct examples using sentence-case.

Don't

Do not use placeholders as labels or as hints or to provide important information.

Hint & errors

Hints and error messages provide additional directions to support the label meaning in an accessible manner.

Do

Use hints to provide useful information about the required data.

Don't

Do not duplicate information, if an error message is repeating the hint, hide the hint.

Examples

Live Preview

Props

Events