Input Text

Input text lets users enter and edit text.

• Disabled State: Prevents input interactions and removes its value from the form submission.
• Placeholder: When there’s no value entered, show a placeholder with a potential value example. Don’t use placeholders as labels for the inputs.
• Label: There should be a text label linked with the text field. Clicking the label should move the focus to the field.
• Error State: The error state is used for form validation errors when the error is related to the text field only. Always use a text error along with changing the colour of the field.
• Focused State: The focused state should highlight the text field when users start to interact with it. There is always only one focused field in the form.
• Autocomplete: When applicable, adding support for the HTML autocomplete attribute will allow users to easily enter different data types.
• Icon Support: Icons are used to describe input methods, express a text field state or provide additional functionality.