Components / Inputs / Date fieldOpen in Figma

Date field

Ready

A field for entering a date, a time, or both, chosen from a picker.

Platforms Phone · TabletGroup InputsUpdated 26 Oct 2026

When to use

  • The answer is a calendar date, a time of day, or both.
  • A period needs a start and an end: use a pair of fields side by side.

When not to use

If people need toUse
Type a number of days or hoursText field
Choose a month or a year for a whole screenDropdown, inline variant
Choose from a fixed set of periodsDropdown

Anatomy

10 Aug 2026event
  1. Label · required
  2. Required mark · when the field must be filled
  3. Container · required
  4. Date, time or hint text · required
  5. Calendar or clock icon · required, right side

Variants

VariantPurposeFigma
DateA single day. Calendar iconDesigned
TimeA time of day. Clock iconDesigned
PairTwo fields side by side with gap 16: start and end, or date and timeDesigned

States

StateWhenWhat changesFigma
EmptyNothing chosen yetHint text shows the format in Hint greyDesigned
FilledA date or time is chosenValue in Ink, in the standard formatDesigned
OpenThe picker is showingA bottom sheet with a month grid (date) or hour, minute and AM/PM rows (time), the chosen one filled Antz green; Cancel and Done in the footerTemporary rule
ErrorThe value is missing or out of rangeRed border and a red message 4 belowTemporary rule
DisabledThe value can't be changed nowDisabled fill; text and icon in Hint greyTemporary rule

Behaviour

  • Tapping anywhere on the container opens the picker as a bottom sheet titled with the field label. The keyboard never opens.
  • The sheet opens on the current value, or on today when the field is empty.
  • Done writes the value and closes the sheet; Cancel or × closes it and keeps the old value.
  • Days outside the allowed range are not shown as choosable, so a wrong date can't be picked.
  • In a pair, the end date can't be before the start date; the end field shows the error, not the start.

Phone and tablet

PhoneTablet
Label to field812
PairTwo fields side by side, gap 16Two fields side by side, gap 16; a date and its time sit on one line

Content

PartRule
LabelA noun in sentence case, no colon: "Start date", "Time"
Date formatD Mon YYYY: 10 Aug 2026
Time formath:mm AM: 09:14 AM
Hint textThe format, not an instruction: "DD Mon YYYY"
Error messageSays what to fix in one line: "End date is before start"

Do and don't

10 Aug 2026event
20 Aug 2026event
DoPut a start and an end side by side, same width.
10/08/26event
Aug 20, 2026event
Don'tMix date formats or write dates in numbers only.
Text fieldDropdownBottom sheetForm layout
← DropdownPicker field →