Selection Controls
Variations
There are 6 types of selection controls.
1. Checkmark
When selected, a checkmark appears next to the option to signify that it is selected, and all elements become MetLife Blue 2 (#007ABC).
2. Checkmark with text field
This selection control can be tapped to select, and allows a user to input a value. Before being filled, text in the second column should be MetLife Dark Gray (#75787B).
3. Radio Button
Radio buttons are used to select one option in a list, while all available options are exposed.
4. Pill
Pills are used to select one or multiple options in a list, while all available options are exposed.
5. Checkbox
Checkboxes are used to select one or more options.
6. Toggle
Toggles are used to turn an option on or off.
States
Checkmark
Default
Column one text is MetLife Darkest Gray (#333333), column two text is black (#000000) and underline is MetLife Gray (#D9D9D6).
Filled
Text, checkmark and underline are MetLife Blue 2 (#007ABC).
Focused
Text, checkmark and underline are MetLife Blue 2 (#007ABC).
Checkmark with text field
Default
Before a user inputs their own value, text in the second column should be MetLife Dark Gray (#75787B).
Selected
When a user is inputting their own value, text is MetLife Darkest Gray (#333333) and the underline is MetLife Blue 2 (#007ABC).
Filled
When a user exits the field, the text, checkmark and underline are MetLife Blue 2 (#007ABC) to signal the control is selected.
Focused
Radio Button
Default
Unselected radio button outline and text are MetLife Darkest Gray (#333333).
Filled
Radio button text and circle outline are MetLife Darkest Gray (#333333) and the circle fill is MetLife Green (#A4CE4E).
Focused
Pill
Default
Unselected pill outline and text are MetLife Darkest Gray (#333333).
Filled
Filled pill text is MetLife Darkest Gray (#333333) and pill background is MetLife Green (#A4CE4E).
Focused
Checkbox
Default
Unselected checkbox outline is black (#000000) and text is MetLife Darkest Gray (#333333).
Filled
Checkbox fill is MetLife Blue 2 (#007ABC) and checkmark is white (#FFFFFF).
Focused
Toggle
Default
Unselected toggle is is MetLife Dark Gray (#75787B) and text is White (#FFFFFF).
Filled
Toggle fill is MetLife Blue 2 (#007ABC) and text is white (#FFFFFF).
Focused
Usage
Selection controls allow a user to make a selection. Checkmarks and radio buttons are used to select one item among multiple choices, whereas pills can be used to select one or more options.
Radio buttons and pills in the Find A Provider flow.
Checkmark in a payment flow. The first option in a list should start selected to indicate that a user can select from the options.
Checkboxes in the login widget.
Notification settings with toggles.
Animation
1. Checkmark & Checkmark with text field
When a user selects a payment amount option in a payment flow, the underline’s color change animates from left to right.