Input Field
Input fields give people a way to enter and edit text. They’re used in forms, modal dialog, tables, and other surfaces where text input is required.
Types of Text field
- TextFields (without placeholder)
- TextFields (with placeholder)
Best Practices
Layout
- Use a multi-line text field when long entries are expected.
- Don't place a text field in the middle of a sentence, because the sentence structure might not make sense in all languages. For example, "Remind me in [textfield] weeks" should instead read, "Remind me in this many weeks: [textfield]".
- Format the text field for the expected entry. For example, when someone needs to enter a phone number, use an input mask to indicate that three sets of digits should be entered.
Content
- Include a short label above the text field to communicate what information should be entered. Don't use placeholder text instead of a label. Placeholder text poses a variety of accessibility issues (including possible problems with color/contrast, and people thinking the form input is already filled out).
- When part of a form, make it clear which fields are required vs. optional. If the input is required, add an asterisk "*" to the label.
- Use sentence-style capitalization (only capitalize the first word).
Text Field
States
Transitions
| Transitions | Front View | Isometric View |
|---|---|---|
| Appear | - | - |
| Enter | - | - |
| Exit | - | - |
| Interact | - | - |
| Disappear | - | - |