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
Multiline Text Field
States
Last updated
