Web UI Playbook

Text Input

Edit this file

Text inputs let users enter or edit single-line text. They are an essential form element, with support for validation and feedback.

When to Use Text Input
Understanding the appropriate use cases for text input components in your interface.

Use Text Input When:

  • • Free-form text entry: Names, messages, descriptions
  • • Single-line data: Email addresses, phone numbers
  • • Search functionality: Query input and filtering
  • • Unique information: Cannot be selected from a predefined list
  • • User-generated content: Comments, titles, usernames

Don't Use When:

  • • Multi-line text: Use textarea instead
  • • Predefined options: Use select or radio buttons
  • • Binary choices: Use checkbox or switch
  • • Date selection: Use date picker
  • • Numeric ranges: Use slider or stepper

Basic Examples

Please enter your first and last name

References & Further Reading
Essential references for text input component implementation and best practices.
Wise Design - Text Input
Visa Design - Input Usage
W3C WAI - Forms Tutorial
eBay Playbook - Text Field
Adobe Spectrum - Text Field
Apple HIG - Text Fields
GitHub Primer - Text Input Accessibility
Material Design - Text Fields
Shopify Polaris - Text Field
Uber Base - Text Field