Text fields let users enter and edit text.
Text fields are the main way a user enters text information on a page or in a dialog or modal window.
We recognize several distinct input variations through content options.
- Without labels – A compact version of the standard inputs
- With icon button – Extend an input with access to custom actions
- With leading icon – Indicate expected data type and/or add custom action
- With trailing icon – A compact input with access to custom action
Our text fields have built-in types such as password, search and number with their associated validations as defined in HTML5.
Our text field is based on the Material Design text field component.
- Label – Describes the type of information captured and displayed in the text field.
- Input text – Text entered by the user.
- Fill – Some states change the fill color.
- Activation indicator – Color and width vary according to current state.
- Leading icon – Optional
- Trailing icon – Optional
The standard text field (A) includes a label in or above the data entry area. The text field without label variation (B) provides a less-cluttered alternative to the standard text field.
- Standard text field – empty and inactive (top), filled and focused (bottom)
- Text field without label (with placeholder text) – empty and inactive (top), filled and focused (bottom)
The text field with icon button variation extends a standard text field, adding a standard icon button on the right. This composite component provides a convenient alternative to using separate text field and icon button components.
Use a text field with icon button as an alternative to a standard text field when you need to capture text and provide some options related to it.
Icon buttons change their position based on LTR or RTL contexts.
The text field with leading icon variation extends a standard text field component, adding an icon before the input text. This composite component type provides a compact alternative to using separate text field and icon components.
Leading icons may signify the input type required or provide access for additional functionality. For example, a calendar icon indicates the text field accepts dates and may be used to reveal a date picker.
Use a text field with leading icon as a compact alternative to the combination of a standard text field and an icon in these scenarios.
- When you want to indicate the expected data type.
- If you need to capture text and associate some functionality with it.
Leading icons change their position based on LTR or RTL contexts.
The text field with trailing icon variation extends a standard text field, adding an icon after the input text. This composite component type provides a compact alternative to using separate text field and icon components.
Trailing icons provide access to additional functionality (such as clearing the text field's content) or may signify valid input methods (such as a microphone icon).
Use a text field with trailing icon as a compact alternative to the combination of a standard text field and an icon If you need to capture text and associate some functionality with it.
Trailing icons change their position based on LTR or RTL contexts.
Text fields are available in normal (medium) and high-density (small) sizes. Text field size is based on an integral number of nudges, where 1 nudge is 8px ().
- Small – Based on a height of 5 nudges (40 px)
- Medium – Based on a height of 7 nudges (56 px)
Real time validation helps to streamline the data entry process and keep data clean. When text input isn\'t accepted, display error text with instructions on how to fix it.
All text field variations can display errors for all states except disabled and read-only. Filled text fields validate the input text while empty text fields validate attributes such as mandatory data.
For more information about how text fields deal with errors, see:
- Material Design – Assistive elements and Error text in Components >Text fields > Anatomy
- Material UI – Components > Inputs > Text Field > Validation
Error text is displayed below the activation indicator, replacing any helper text until fixed. When an error is displayed, elements use colors from the Status Negative color palette.
- Active
- Focused
Placeholder text provides a hint or example of what to enter. Make the text a direct statement without punctuation, using sentence case, and not containing any crucial information. When the user begins typing in the text field, placeholder text disappears or transforms into a label above the input text.
Placeholder text is implemented using the
placeholder
attribute inherited from themwc-textfield
base component.
Our text fields have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.
For more information about text fields, see:
- Material Design – Components > Text fields
- Material UI – Components > Inputs > Text Field
Related components: