Expiry date

Base pattern

This pattern gives clear instructions regarding format with an easily understood input field. Keyboard entry is a fast and accessible way of capturing information.

Use this pattern when there are large data sets so users are not required to scroll or swipe endlessly.

This pattern exists as a widget in the WDP system.

Date range

When databases have short and defined ranges, using select boxes can assist in matching real world card details and reduce errors. For example, a credit card will ask for an expiry date including month (12 options) and typically not have a yearly range beyond 6. This means users will not have the challenges of swiping through large sets of data.

This pattern exists as a widget in the WDP system.

Error states

The error message should always sit above the input field to give context. The error icon helps draw the eye by disrupting the flow of text at the starting point of the sentence, and aids in accessibility for those who may be colour impaired and not see the colour change.

The Expiry date pattern can isolate which field carries the error and highlight accordingly.

Text inputs with errors

Selects with errors

Dos and don'ts

• Do ensure field lengths match the expected length of the data to be captured.
• Do not remove the hint text or the sub label text above the field as this is important discoverable functionality for usability, assistive technologies, and persons with a disability.