Skip to main content

Overview

Ask AIView as Markdown
Copy a prompt to ask an AI assistant about this page.

Form and text input fields provide essential context for users to enter data accurately and move through processes. Clear, concise microcopy within these elements reduces friction and ensures a smooth path to completion.

The labeled iX component is here to guide you through this section with the terms we use throughout the Forms and form field chapters. See Input (component) and Textarea (component).

UI form field numbered example: 1) Label Username*, 2) Text area placeholder Enter user name, 3) Helper text Letters and numbers only, 4) Asterisk indicates required field and 5) Character counter shows 0/25.

  1. Field label
  2. Placeholder
  3. Helper / info text
  4. Asterisk for required fields
  5. Counter (input and textarea field only)

General rules​

Use an asterisk (*) for required fields after (not before) UI text.

UI example showing the field label Username followed immediately by an asterisk without space.

  • Username*
  • Username
  • *Username

Never include spaces between the word and the asterisk (*).

  • Username*
  • Username *

When all form fields are required, add clear instructions below the form heading and add the asterisk to all required form fields.

  • All form fields are required
  • Complete all fields
  • * = required
  • Username (required) / Device name (required) / Device ID (required)

Use counters for form or text input fields, or text areas with character limits, and show the limit at all times.

  • 250 characters
  • 17/250

Don't use urgent error or warning messages when users are reaching or have reached limits.

UI example of a field label Username* containing JohnDoe with a blue info icon and the text 13 characters left.

  • 120 characters left
  • 0 characters left
  • Error: Exceeded maximum characters.
  • Warning! Reaching limit!

Dos and Don'ts​

  • Do ensure mandatory input fields are clearly labeled
  • Don't alarm the user with red error messages for simple input requirements