COMPONENTS
Input
Inputs allow users to enter text or numbers.
- Label
- Input text
- Field
- Supportive text
There are two variations of Input — basic or leading content. To include an icon within the input use Input Icon.
Input can have no label, a top label or an inline label.
Supportive text helps to instructs the user on what the field requires.
Placeholder text is shown in the initial enabled state and guides the user on what type of entry or formatting the field requires.
Input has seven states — enabled, hover, focus, active, filled, disabled and read only.
Input has four types of status available that should be used for form validation — success, warning, error, and loading.
Input fields can be optionally made to be immediately clearable with one click.
Password fields can be built to show and hide text by using the Input Group component with an icon only button.
Inputs can be displayed in large, medium and small sizes.
- Keep input labels brief and use placeholder or supporting text to add additional explanatory information if necessary.
- Use a Input Icon to clarify the value an input field.
- Do not remove field borders.
- If you limit the number of characters in a field, you should display a counter to inform the user of the limitation.
- Field widths should roughly approximate the intended input. A field for a three-character month, for example, shouldn’t appear to accommodate twenty characters.
- Use status to provide user feedback for errors and warnings.
Contents