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.
Icons can be added in the leading or trailing position within the Input by using the Input Icon component.
Icon Number can be used for specialized numeric field formatting and the addition of steppers when needed.
Input has seven states — enabled, hover, focus, active, filled, disabled and read only.
Input has five types of status available that should be used for form validation — none, 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