Material Design: Text fields
Documents text fields with labels, helper text, error messages, formatted inputs, grouped characters, cursor jumps across separators, character counters, and prefix or suffix alternatives.
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Character count | Choose character count when the limit is real, useful to users, and enforceable in the same unit displayed by the interface. | The field accepts typing and paste normally; the counter observes length rather than blocking editing prematurely. | Material Design text-field guidance supports character or word counters when a limit exists. |
| Input mask | Choose input mask when the value has a stable, narrow structure with predictable character classes and grouping. | Typing valid characters fills the next available mask slot and inserts literal separators automatically. | Material Design supports grouped formatted input, helper text, error text, and prefix/suffix alternatives for text fields. |
| Input prefix/suffix | Choose input prefix/suffix when a common fixed symbol, unit, abbreviation, domain, or icon clarifies what the text input accepts. | The affix is visible near the input but not editable as part of the field value. | Material Design supports prefixes and suffixes as formatted text-field elements for units, currency, domains, and time zones. |
Comparisons supported by this source
- Character count vs textarea vs text input vs inline validation
Material Design documents character or word counters as text-field supporting text used when a character or word limit exists.
- Input mask vs text input vs inline validation vs autocomplete
Material Design documents formatted grouped-character text fields, helper text, error messages, and prefix/suffix alternatives.
- Input prefix/suffix vs input mask vs text input vs inline validation
Material Design documents prefixes and suffixes as formatted text-field variations that clarify units or add input in advance.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: Google Material Design. Last checked: .