Input

COMPONENTS

Inputs allow users to enter text or numbers.

View GSUI Toolkit Documentation (Internal Only)

View in Figma (Internal Only)

Anatomy

Label
Input text
Field
Supportive text

Variations

There are three variations of Input — standard, leading content and trailing content. To include a leading or trailing icon within the input use Input Icon.

Appearance

Labeling

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

Supportive Text

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

Placeholder Text

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

Behaviors

States

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

Status

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

Clearable

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

Password Visibility Toggle

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

Sizes

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

Guidelines

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.

Select

Select allows users to choose items from a list shown in a dropdown menu.

Iconography

Icons are graphical representations of actions, entities or concepts.

Contents