Skip to content

Forms: date input

gigi-chang edited this page Jun 22, 2022 · 1 revision

Use the date input to allow a user to input a date.

Overview

Date input

image of date input form with month, day and year text inputs

Usage

When to use

  • Use a date input for dates that are familiar to the users (example: birthday) or far away from the present date.

How to use

  • Always include help text that shows the format required.

How we created this component

The date input was added to the Extended GC Design library - DECD based on best practice research, as it did not exist in the Canada.ca design system.

An alternative is the WET calendar date picker. However, note that calendar date pickers should only be used to select dates close to the present time (within the same year). They can be frustrating for users who choose dates far in advance because they require too much navigation to get to the desired input; for these users, it would be faster to simply type the year.

Clone this wiki locally