Display Text Field

Done

The Display Text Field is a high emphasis text field used to capture short inputs. Common uses for the Display Text Field include inputting custom amounts and validating with short alphanumeric codes (in MFA experiences for example). The Display Text Field should only ever be used when the content is the most important element on the screen. As opposed to the Text Field, the Display Text Field is designed primarily for immersive experiences, and should adapt to the background surface it sits on. As such, there are less theming options, assuming that the context will already be themed.

Anatomy

A Display Text Field comes in two variants: Currency and Alpha-numeric. Alpha-numeric Display Text Fields may either be Specified or Unspecified (see below). Both variants allow for left-alignment or centered-alignment depending on the context.

Currency

As an expansion on the Currency Text Field, this Display Text Field is used for inputting and editing currency values.

Currency prefix - Display
Input value - Display
Active indicator (optional)
Error Quick Action Button (optional)
Error text - Caption (optional)
Helper Quick Action Button (optional)
Helper text - Caption (optional)

Note: When the underline is set to off, the static Display Text Field must display a value so that the component provides adequate affordance.

‍

Currencies in Iris

The Display Text Field shares all of the standard currency elements as other currency fields within Iris.

Currency prefix
Comma delimiter
Value (all nth places, not just ones)
Cent amount (optionally automatically placed)

Alpha-numeric

The alpha-numeric Display Text Field can be used for entering short strings. If an alpha-numeric input will be more than 8 characters long, do not use a display text field. Instead, you should use a standard text field. There are two distinct styles for the alpha-numeric display text field: specified and unspecified. When the exact character count of an input is known, it is best to use the specified variant. This will give users a better sense for what the system requires. When the exact character count is unknown or variable, use the unspecified variant.

Specified

Active indicators
Input value - Display
Error Quick Action Button (optional)
Error text - Caption (optional)
Helper Quick Action Button (optional)
Helper text - Caption (optional)

‍Unspecified

Active indicator
Input value - Display
Error Quick Action Button (optional)
Error text - Caption (optional)
Helper Quick Action Button (optional)
Helper text - Caption (optional)

Specs

Color

Element	Property	Value
Currency prefix	Color	∆colorPlatformGray900
Currency prefix (Error)	Color	∆colorBrandedError
Currency prefix (Disabled from static/hover)	Color with Alpha	∆colorPlatformAlpha400, ∆colorPlatformGray900
Currency prefix (Disabled from error)	Color with Alpha	∆colorPlatformAlpha400, ∆colorBrandedError
Input value	Color	∆colorPlatformGray900
Input value (Error)	Color	∆colorBrandedError
Input value (Disabled from static/hover)	Color with Alpha	∆colorPlatformAlpha400, ∆colorPlatformGray900
Input value (Disabled from error)	Color with Alpha	∆colorPlatformAlpha400, ∆colorBrandedError
Active indicator (Static)	Color	∆colorBrandedAffordance100
Active indicator (Hover)	Color	∆colorBrandedAffordance200
Active indicator (Active/Focused)	Color	∆colorBrandedAffordance
Active indicator (Filled)	Color	∆colorPlatformGray200
Error quick action button	Color	See Quick Action Button
Error messaging	Color	∆colorBrandedError
Helper quick action button	Color	See Quick Action Button
Helper text	Color	∆colorPlatformGray600
Alpha-numeric active indicators (Success)	Color	∆colorBrandedSuccess

Elevation

This element should derive its elevation from the parent container. There are no unique elevation considerations for this component.

Spacing

Dynamic font scaling

The Display Text Field should always be used with a max-width. The specific pixel value may change based on context or device, but the input should never exceed the given width. In the event that the characters entered would exceed that max-width, the input value font size should decrease so that all characters fit. The Display Text Field should not be used if the font scaling would reduce the input value font size to 16px or less.

States

Static
Hover
Selected
Disabled
Filled
Success (alpha-numeric only)

Theming

Color

Element	Property	Value
Currency prefix (Error)	Color	∆colorBrandedError
Currency prefix (Disabled from error)	Color with Alpha	∆colorPlatformAlpha400, ∆colorBrandedError
Input value (Error)	Color	∆colorBrandedError
Input value (Disabled from error)	Color with Alpha	∆colorPlatformAlpha400, ∆colorBrandedError
Active indicator (Static)	Color	∆colorBrandedAffordance100
Active indicator (Hover)	Color	∆colorBrandedAffordance200
Active indicator (Active/Focused)	Color	∆colorBrandedAffordance
Error messaging	Color	∆colorBrandedError
Alpha-numeric active indicators (Success)	Color	∆colorBrandedSuccess

Elevation

There are no unique elevation considerations for this component.

Shape

There are no unique elevation considerations for this component.

Spacing

There are no unique elevation considerations for this component.

Type

Element	Property	Value
Currency prefix - Display	Font family	Branded Font Family
Input value - Display	Font family	Branded Font Family

Placement

Left aligned

Generally speaking, the Display Text Field should be left aligned to the rest of the content within its context.

‍

Centered

In some cases, the page may feel more balanced and cohesive if the centered version of the Display Text Field is used. Take care not to enforce center alignment when it conflicts alignment patterns for the rest of the elements on a page.

Behavior

Left-to-right input

Left-to-right input refers to the typical pattern of entering characters from left to right, as you would in a text editor. For all alpha-numeric variants, this is the default and only input method available. Left-to-right input may be used for currencies when the system does not call for a precise decimal value. One example of this would be in the creation of savings goals, where the user may want to enter “$1,000,” not considering the exact amount of cents. In this case the system should assume a value of 0 cents while presenting the user’s input as they typed it.

While the input method for currency text fields defaults to right-to-left, the designer may opt to allow left-to-right in experiences that are most likely to be encountered by users at a physical keyboard (such as on large+ viewports). In this event, when no decimal or cent value is entered, the system should assume 0 cents.

Right-to-left input

Right-to-left input refers to the method of inputting characters at the hundredth decimal position (i.e. at the 5 in $1.45). Each new number entered pushes the previous entry one decimal place to the left. For example, in order to input a value of $1.45, a user would type a 1, then a 4, and then a 5, but the text field would read $0.01, then $0.14, and finally $1.45. This is the default behavior for currency text fields in the event that an entry requires an exact amount of cents (as it would in a transfer or remote deposit).

Error

When the focus leaves a display text field, a validation check should occur. If the validation produces any errors, the error “shake” animation should apply to the input value, accompanied with an error haptic response.

Interaction	Steps	Duration	Easing	Notes	Haptics
Shake	1a. Error message appears			The error message appears instantly in all variants.	Error on trigger (Flutter: Vibrate)
	1b. -4px shift	∆motionTimeExtraFast	∆motionEasingStandard	Move the input component to 4px left of its starting position.
	2. +8px shift	∆motionTimeExtraFast	∆motionEasingStandard	Move the input component to 4px right of its starting position.
	3. -6px shift	∆motionTimeExtraFast	∆motionEasingStandard	Move the input component to 2px left of its starting position.
	4. +4px shift	∆motionTimeExtraFast	∆motionEasingStandard	Move the input component to 2px right of its starting position.
	5. +2px shift	∆motionTimeExtraFast	∆motionEasingStandard	Return the input component to its starting position.

When an error occurs in a specified alpha-numeric input, the active indicators should shake with the input value.

Validation

Interaction	Steps	Duration	Easing	Notes	Haptics
Success	1. Indicators turn ∆brandedColorSuccess			The active indicators turn ∆brandedColorSuccess instantly.	Success on trigger (Flutter: Heavy impact)

Developer Docs

Vue Developer Docs

Component documentation coming soon!