Input

Inputs allow the user to enter and edit text.

Structure

Each input variant allows for the following states:

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

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`