Switch to M&T
Overview

Date Select

Date select is a type of form input that allows the user to select the month, day and year for a specific date. The calendar icon orients the user to the purpose of the component. Each of the input elements consists of a container, a text label, and a dropdown list.

Variants

There should be one date select component per row. Keep a margin of 16px between the date select container and the previous component.

Date Select

In addition to the default state, each selectable element of the date select bar also has an active state, a focus state and a selected state. In the active state, a dropdown presents input options with their own hover states. Once the user selects an option, the dropdown disappears, and the selected state appears for that element. The error state takes the form of an Input Errorcomponent.

International Date Select

This International Date Select offers the same functionality of the default in a widely recognized international date format (DD/MM/YYYY). The states in the International Date Select function identically to the default.

Microcopy

Text labels for the default inputs are as follows with no variant in order or capitalization: Month, Day, Year. For the Month inputs, write out the twelve calendar months with initial caps. The Day and Year inputs will contain only numerals.