Text Areas

Text areas allow users to enter long-form material that spans numerous lines.

Types

Stand alone

See the Pen Text Areas by USANA UX (@usana_ux) on CodePen.

Character count

See the Pen Text Areas: Character count by USANA UX (@usana_ux) on CodePen.

Helper text

See the Pen Text Areas: Helper text by USANA UX (@usana_ux) on CodePen.

Guidelines

Recommended when a user needs to enter more than one line of data or information.

Anatomy

Field label: The label of an input area is often positioned to the left. The label specifies the sort of information needed.
Text area: Text input field
Input text: This field contains the content entered by the user.
Helper text: (Optional) Text beneath the field to provide additional context or instruction.
Character count: (Optional) Counter to display character count restrictions.

Interaction

A text area is used by clicking the field and entering your desired content.

Specifications

For better and more pixel-perfect text areas, designers and developers should follow these specifications.
‍

Best Practices

Do

Use appropriately-sized text areas.
Write in sentence case with minimal punctuation.
Have a visual label that clearly states the purpose of the input.

Don't

Place pagination above search results.
Gathering input from users that isn't needed or required.
Give users the ability to format text.