COMPONENTS
Inputs allow users to enter text or numbers.
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.
Contents