Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Datepicker

The datepicker component helps users pick dates from a calendar or type them directly into the input.

GitHubGitHub logocomponents/datepicker
StorybookStorybook logocomponents/datepicker
DesignUsageAccessibilityUpdates

Purpose

Pick dates with precision

The calendar view helps users select dates in context — seeing the day of the week and surrounding dates reduces scheduling mistakes.

Type or click

Users can either type a date directly into the input or use the calendar interface, accommodating both keyboard-first and pointer users.

Consistent date format

A shared date picker ensures all products in your service collect and display dates in the same format, reducing ambiguity.

Anatomy

1

Input field

2

Calendar trigger

3

Calendar panel

Configuration

Default

The datepicker combines a text input with a calendar panel for structured date selection.

Renders a date input with a calendar picker. Use when users need to select a specific date and a calendar view helps them pick the right one in context.

Playground

BETA

Structure

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: font-size-14 under sgds/datepicker means sgds/datepicker/font-size-14.

sgds/datepicker
CategoryComponent tokenSemantic tokenValueTypographyfont-size-14sgds/font-size/14—font-weight-semiboldsgds/font-weight/semibold—line-height-20sgds/line-height/20—line-height-24sgds/line-height/2424pxColourbg-translucent-subtlesgds/bg-translucent-subtleoklch(from #0E0E0E l c h / 0.05)primary-surface-translucentsgds/primary/surface/translucent—Formform-border-radius-mdsgds/form/border-radius/md—form-border-radius-smsgds/form/border-radius/sm—form-color-defaultsgds/form/color/default—form-color-fixed-lightsgds/form/color/fixed-light—form-color-inversesgds/form/color/inverse—form-gap-mdsgds/form/gap/md—form-gap-smsgds/form/gap/sm—form-height-lgsgds/form/height/lg—form-outline-focussgds/form/outline/focus—form-padding-xsgds/form/padding/x—form-padding-ysgds/form/padding/y—

Usage

When to use

  • Use datepicker when users need to choose a calendar date and seeing nearby dates helps reduce errors.
  • Use it for date selection, not for broad date instructions or timelines.

When not to use

  • Do not use datepicker when users need to enter a different kind of value, such as freeform text or a date range explanation.
  • Do not rely on placeholder text alone to explain the expected format.

Best practices

Clarify the date input

A clear prompt and a single expected date help users complete the field confidently.

Do not rely on the placeholder

Users should not have to guess the expected input from placeholder text alone.

Accessibility considerations

Built-in accessibility

  • Datepickers combine an input, trigger button, and calendar dialog.
  • The calendar dialog exposes its current view with an accessible dialog label.

Labels and content

  • Use a visible label and hint text when the expected date format needs support.
  • Keep validation feedback close to the datepicker.

Focus and interaction

  • When the calendar opens, SGDS moves focus into the calendar.
  • When the calendar closes, SGDS returns focus to the input.

Keyboard interaction

KeyInteractionTabMoves focus from the datepicker control to the next focusable element.Shift+TabMoves focus to the previous interactive element.↓ Downor↑ UpOpens the datepicker menu or moves focus between available options.EnterActivates the focused focused date.EscCloses the open datepicker when supported by the component.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for datepickerPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/datepicker

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.