Switch to M&T
This page's guidelines are under construction. For questions on this component's use, please reach out to the Currency team.
Overview

Input Field

The input field pattern prompts and collects information from users as part of a form. The default elements are a label and one of the standard input components. Add the "Optional" label when the input field is not required. Use a Help Link variant of the icon link to communicate additional information when it won't fit in the interface. The caption provides the user with more information than can fit in the label, including tips and notes. Using a caption is optional, but can give the user more context for how to fill in the field.

Variants

What's this?
Optional

Lorem ipsum dolor...

Text Input

Used to capture a single line of information through the text input component.

What's this?
Optional

Lorem ipsum dolor...

Text Area

Used to capture multiple lines of information through the text area component.

What's this?
Optional

Lorem ipsum dolor...

Select

Used to capture a single, predefined response through the select component.

What's this?
Optional

Lorem ipsum dolor...

Button Group

Used to capture a single, predefined response through the button group component.

What's this?
Optional

Lorem ipsum dolor...

Radio

Used to capture a single, predefined response through the radio component.

What's this?
Optional

Lorem ipsum dolor...

Checkbox

Used to capture a multiple predefined responses through the checkbox component.


Design Environment

Form action groups will default to the persistent position, but can be placed in-scroll if that works better for the design. Use nested columns in tablet and desktop views to make the most of the horizontal form space. For long forms that can be divided into multiple steps, consider using a step guide pattern.


Microcopy

The optional label will always be "Optional" and the secure input toggle will always be "Show" and "Hide" with the optional Eye Open/Eye Closed icons. Write captions in full sentences and stay focused on the overall prompt. Use sentence case with end punctuation. Otherwise, follow the microcopy guidelines for the general label component and the appropriate input component.