Action button Alert Avatar Bottom sheet Button Checkbox Chip Circular button Compact date input When to useBest practiceContentAvailabilityCritical banner Date input Dropdown Instruction Modal Money input Navigation option Nudge Password input Popover Radio Search input Section header Snackbar Summary Switch Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components Action buttonAlertAvatarBottom sheetButtonCheckboxChipCircular buttonCompact date inputCritical bannerDate inputDropdownInstructionModalMoney inputNavigation optionNudgePassword inputPopoverRadioSearch inputSection headerSnackbarSummarySwitchTabsText areaText inputUploadUpload inputPatterns Resources
Compact date input

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

Compact date input
When to use

Use a compact date input:

  • when asking users for a date they already know, or can easily find (like their expiration date)

Don't use a compact date input:

  • when asking for a full date with day, month and year (use the 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
  • 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