Switch to Wilmington
DesignDevelop
Version 4.5.1
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, and a select or text input. For accessibility, always use date pickers with a label.

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

The Date Select component allows the user to choose a date by individually selecting month, day, and year. In the active state for each element, 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.

International Date Select

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

Date input
Date Input
The date input field allows user to input any text date. Placeholder text should advise the user of the expected date format. Do not force the user to enter separators, instead use masks on the field. Optionally, the calendar icon on the left of the input can launch the calendar picker variant.
NOTE: This component is currently in development. Please check back later.
April 2021
S
M
T
W
T
F
S
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
Calendar Picker
Use the calendar picker to give the user more context when choosing a date, such as the day of the week a date falls. Calendar pickers are also useful when there is a need to restrict the user input, e.g. for unavailable dates, or to highlight a date that will aid decision-making, e.g. a start date when choosing a range. Do not use calendar pickers for well-known dates such as birthdays.

States

The Default and International variants of the date select have the same states as the select component. Each selectable element of the date select has an active state, a focus state and a selected state. The date input variant has the same states as a text input

The error state for all variants will highlight the entire container red to draw the user's attention and an input error component will appear below the length of the container to guide the user in correcting the error.

Design Environment

Please select today's date.

Any date input in the error state must appear with an input error component.

Microcopy

Except in the case of the International Date Select which follows Day/Month/Year, 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.