Text Areas

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


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.


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


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


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


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

Best Practices

  • Use appropriately-sized text areas.
  • Write in sentence case with minimal punctuation.
  • Have a visual label that clearly states the purpose of the input.
  • Place pagination above search results.
  • Gathering input from users that isn't needed or required.
  • Give users the ability to format text.