Skip to content

Date Picker

A date picker lets the user choose a date by typing it or by picking it from a calendar. Both paths stay open at all times — the text field takes a DD/MM/YYYY value directly, and the trailing button opens a calendar beside it. The styleguide ships the calendar itself (.tng-calendar); the field around it is Field and the surface it opens into is Dropdown.

  • CSS

Maintained by Platform

Ready to use

DesignCSSAccessibility

A Date Picker is a form input component that lets users enter or select a date. It combines a text field (for direct entry) with a calendar popup (for visual selection), so users can complete the task with either keyboard-first or pointer-first behaviour. The component is fully responsive and designed to be used across mobile, tablet, and desktop without separate variants.

Anatomy

Section titled “Anatomy”

March 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
  1. Calendar
  2. Header
  3. Navigation Button
  4. Weekdays
  5. Selected day
  6. Today
  7. Unavailable day

When to use it

Section titled “When to use it”

Use the Date Picker when:

  • The user needs to select a specific calendar date (for example, a preferred test-drive day).
  • The date is in the near future or recent past and calendar context improves selection confidence.
  • Input must be constrained to a valid date range (min/max dates).
  • Date format consistency is required for downstream processing.

Avoid the Date Picker when:

  • Only a month or a year is required.
  • The interaction is relative rather than absolute (for example, “in X days”).
  • There is no persistent, visible label associated with the field.

Properties

Section titled “Properties”

State

Rested, Hover, Active, Disabled, Focus, and Error. Active opens the calendar while keeping typed input available; Focus highlights the currently edited field for keyboard users without opening the popup; Error appears after blur when the value is invalid.

Required

A boolean that marks the field as mandatory. The label reflects the required state visually and through the form submission semantics.

Helper text

Optional text beneath the field — use it to show the expected date format with a concrete example. The component swaps in an error message in the same slot when validation fails.

Trailing icon button

A trailing icon button doubles as the trigger that opens the popup. Figma draws it as a chevron — pointing down while the popup is closed, up while it is open — and swaps in the calendar glyph for the error and required-error states. Whichever glyph it carries, the button needs its own accessible name; the icon is decorative.

Calendar popup

The month grid that opens on click or tap. Day cells expose full dates via aria-label, disabled or unavailable days stay visible but non-selectable, the selected date is filled, and the current date carries a distinct outline. Figma has no frame for this popup — it is documented on the CSS and Accessibility tabs.

Platform considerations

Section titled “Platform considerations”

Desktop

The calendar opens beneath the input, flipping above it when there isn’t room. Keyboard interaction covers the field, the trigger, month navigation, and day cells — focus moves into the popup when it opens and comes back out to the field or the trigger when it closes. See the Accessibility tab for the exact sequence.

Tablet

Same behaviour as desktop. Make sure the popup has enough room to render below the input without clipping; flip above when needed.

Mobile

Keep both paths available — typed input shouldn’t disappear in favour of calendar-only on smaller screens. The calendar popup may shift to a sheet pattern but still respects focus and aria-label semantics.

Best practices

Section titled “Best practices”

Treat the picker as a dual-path control — typing and tapping should both work all the way through.

Do

Keep both interaction paths available (typed input and calendar selection), validate on blur and provide a clear error message that includes the expected format, use helper text to show a concrete example date, and keep disabled and unavailable dates visible but non-selectable inside the calendar.

Don't

Don’t hide or replace the persistent label with placeholder-only text, don’t rely on colour alone for the error or selected state (pair it with an icon or copy), don’t force calendar-only interaction for keyboard and assistive-tech users, and don’t trigger validation errors while users are still typing.

Content guidelines

Section titled “Content guidelines”

Make the label specific to the date you’re asking for (“Preferred test-drive date”, not just “Date”). Use the helper text to demonstrate the expected format with a real example (“DD/MM/YYYY — 25/12/2026”) so the user can match the pattern before the picker opens. Error copy should name the rule that failed (“Pick a date after today”) rather than restating the field — pair it with the error icon so the message reads without colour alone.