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. Placeholder + typed text input
  3. Call out
  4. Field

 

 

 

 

 

Variations

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

 

 

 

 

 

States

  1. Enabled
  2. Hover
  3. Focused
  4. Read only (white)
  5. Read only (grey)
  6. Error
  7. Error focused
  8. Disabled
Select field
Resources
Text field
Best practices
VUD Product Design System

VUD Product Design System is a collection of design assets, tokens, guidelines, code snippets and components that guarantees consistency and efficiency in the design and development process across enterprise software solutions.

Resources
Support

© 2024 Visma Unified Design.