Text field
A text field is an input control that lets users enter and edit text. It can capture single-line or multi-line input and often supports labels, placeholders, and validation.
Philosophy
Text fields are the foundation of user input in forms and interactive interfaces.
They allow free-form expression while enforcing structure when needed.
They prioritize clarity and guidance through labels, placeholders, and error messages.
They balance flexibility (open input) with control (validation and formatting).
Anatomy
Variants
Standard - Single
Standard inputs (e.g., name, email).
Standard - Grouped
Grouping logically related fields.
States
Idle
Field is inactive with label and/or placeholder.
Typing
Cursor active, field highlighted.
Filled
User input visible in the field.
Usage tips
Dos
Use helper text when additional context is needed.
Group related fields logically in forms.
Don’ts
Don’t leave users guessing formatting rules (e.g., phone number).
Real-world example
