Text field

Definition: A text field is a single-line input for short text or characters.

When to use

Use a text field for single-line text input, like names, email addresses, or numerical data.

 

Anatomy

  1. Label
  2. Input
  3. Call out
  4. Field

 

 

 

 

 

Variations

  1. Top label (Recommended for forms as it can help improve accessibility.)
  2. Left label (For legacy products)

 

 

 

 

 

States

  1. Enabled
  2. Hover
  3. Focused
  4. Read only (white)
  5. Read only (grey)
  6. Error
  7. Error focused
  8. Disabled