Action button Alert Avatar Bottom sheet Button Card Checkbox Chip Circular button Compact date input Critical banner Date input When to useBest practiceContentAvailabilityDate picker Dropdown Instruction Modal Money input Navigation option Nudge Password input Popover Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components Action buttonAlertAvatarBottom sheetButtonCardCheckboxChipCircular buttonCompact date inputCritical bannerDate inputDate pickerDropdownInstructionModalMoney inputNavigation optionNudgePassword inputPopoverPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTabsText areaText inputUploadUpload inputPatterns Resources
Date input

A date input lets people enter a date within a form.

Date input
When to use

Use a date input:

  • when asking users for a date they already know, or can easily find, like their date of birth

Don't use a date input:

  • when you need just the month and the year (use the compact date input instead)
  • when asking users for multiple dates, such as a range, or a start and finish date (use date lookup instead)

Best practice
  • Change the order of the sub-fields to reflect your users' location (for example, some put the day first, some the month).
  • Include an information message if you have evidence that users need more context.

Content

Label

Label copy should:

  • be no more than 3 words

  • be a noun that describes the information the user needs to enter (and not a verb)

Information message (optional)

Information message copy should:

  • be a single sentence

  • give some extra context to help the user enter the right information

Availability

Platform

Available

Developer documentation

Android

iOS

Web

Web documentation