Inputs allow users to enter text or numbers.

Input Intro
Input Anatomy
  1. Label
  2. Input text
  3. Field
  4. Supportive text

There are two variations of Input — basic or leading content. To include an icon within the input use Input Icon.

Input Variations

Input can have no label, a top label or an inline label.

Input Variation Labeling

Supportive text helps to instructs the user on what the field requires.

Input Assistive Supporting Text

Placeholder text is shown in the initial enabled state and guides the user on what type of entry or formatting the field requires.

Input Assistive Placeholder Text

Icons can be added in the leading or trailing position within the Input by using the Input Icon component.

Input Icon

Icon Number can be used for specialized numeric field formatting and the addition of steppers when needed.

Input Number

Input has seven states — enabled, hover, focus, active, filled, disabled and read only.

Input States

Input has five types of status available that should be used for form validation — none, success, warning, error, and loading.

Input Validation

Input fields can be optionally made to be immediately clearable with one click.

Input Clearable

Password fields can be built to show and hide text by using the Input Group component with an icon only button.

Input password

Inputs can be displayed in large, medium and small sizes.

Input 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.