Components

Date Input

Overview

Overview

When to use

When a user needs to input a far distant (e.g. birth date) or far future date (e.g. expiry date of an id card etc).

When not to use

• Allow users to choose recent or near future dates.
• Limit date options to a specific range of dates.
• When it is important for the user to know the day of the week, or the relationship between days. For example, scheduling appointments.

Principles

Date input component consists of 2 or 3 text fields to let users enter a day, month and year. The fields are grouped together with a legend and optional hint text.

Examples

Date input can have either two or three text fields

Do not automatically tab users between the fields of the date input because this can be confusing and may clash with normal keyboard controls.

Error messages

If there's an error with the whole entered date, highlight all fields.

If there's an error with one or two fields, highlight only the field(s) that have an error. The error message should specify which field(s) has an error.