Skip to main contenteBay Playbook

Date field

v1.0

Date picker fields allow users to open a calendar and select a singe date or a date range.

  • CSS
  • Marko
  • React

Anatomy

Phone number field diagram with 6 elements numbered: 1. Label, 2. Country dropdown, 3. Helper text, 4. Country code, 5. Value, 6. Field container.
  1. Label
  2. Value
  3. Helper text
  4. Calendar icon
  5. Field container

Properties

Label

Required. The label names the date or date range the user is selecting.

  • Use sentence case
  • No ending punctuation
  • Use a noun or noun phrase
  • Aim for 1–3 words
Two examples of a phone number phone number field. The first shows the label above the field, the second shows the label inside the field.

Calendar

The calendar is always paired with the date field. Clicking on the field displays a calendar picker. Users can select a single date or a date range. Learn more about formatting calendar.

Input value

Required. The value reflects the date or date range the user selects.

  • Abbreviate months to 3 characters with no periods
  • Use four-digit years
  • For date ranges, use an en dash with no spaces
  • Repeat the year only when the range spans two calendar years (e.g., Dec 30, 2025–Jan 2, 2026)

Learn more about formatting dates.

Helper text

Optional. Helper text communicates specific formatting requirements for entering a phone number.

  • Use sentence case
  • No ending punctuation
  • Max one line
‘Selected dates must be in the future’ is shown as helper text.

Error messages

Error messages appear below the field when the input doesn't meet the required format or conditions. The error message replaces any existing helper text.

Keep the tone neutral, don’t blame or scare the user. Clearly inform users the requirements so they know how to fix it.

  • Use sentence case
  • No ending punctuation
  • Avoid technical language or filler words like “please”, “sorry”, or “oops”
An error message sits below a password field.

Size

There are two sizes available: 48px and 40px. These sizes match available button sizes in case they’re inline together. Avoid mixing different sizes in a single form.

Two password fields; a password field with a 40px height sits above a password field with a 48px height.

Screen sizes

Small

Date picker fields on native launch the OS date pickers. HTML uses the popover or fullscreen dialog version.

A native iOS date picker in popover form.

Native date picker

A small screen html date picker as a fullscreen modal.

HTML full screen date picker

Medium

Date picker fields on native launch the relevant OS picker. HTML uses the popover.

A medium screen html example using the double date picker popover.

Large

Date picker fields on native launch the relevant OS picker. HTML uses the popover.

A large screen html example using the double date picker popover.

Specs

Phone number field specs are shown. The height of the field container is 48px, the space between the label and field container is 4px, the space between the field container and helper text is 8px, the padding inside of the right side of the field container is 16px, the padding on the right of the country selector is 8px, and the padding on the left and right of the value field is 8px.