Input
Inputs allow the user to enter and edit text.
Structure
Elements
- Container
- Input text
- Floating label text
- Leading icon (optional)
- Helper text (optional)
- Trailing icon (optional)
- Prefix text (optional)
Variations
Outlined
Filled
Behavior
States
Each input variant allows for the following states:
- Inactive
- Focus
- Activated
- Error
- Disabled
Outlined
Filled
Style
Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.
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
|