Skip to content

Components / Input

Input

Inputs allow the user to enter and edit text.

Structure

Elements

  1. Container
  2. Input text
  3. Floating label text
  4. Leading icon (optional)
  5. Helper text (optional)
  6. Trailing icon (optional)
  7. Prefix text (optional)

Variations

Outlined

With label
Without label

Filled

With label
Without label

Behavior

States

Each input variant allows for the following states:

  • Inactive
  • Focus
  • Activated
  • Error
  • Disabled

Outlined

Inactive
Focused
Activated
Error
Disabled

Filled

Inactive
Focused
Activated
Error
Disabled

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.

Sample Property Sample value
bodyTextAlertColor

Used for inline errors and warning icons that are placed directly on card content

#D73D09FF
bodyTextPrimaryColor

Dark text color used for primary content in layouts

#071523FF
bodyTextSecondaryColor

Medium dark text color used for secondary or muted content in layouts

#64707DFF
bodyTextThemeColor

Themed text that matches the institution's branding; matches the link button text colors, but lacks the button's various interactive state properties

#2A73A8FF
dividerAlternativeColor

Used as a darker alternative to the default divider; most commonly used on the outline border of Online’s inputs

#64707d99
dividerDefaultColor

Default fill for dividers in the app

#E6E6E6FF
secondaryContentBackgroundColor

#DEE4ECFF
© 2021 Jack Henry & Associates, Inc. Trademark notice
Version 0.7.0. Last updated March 23, 2021.