Select a date
The calendar view helps users choose dates with surrounding context.
The datepicker component helps users pick dates from a calendar or type them directly into the input.
The calendar view helps users choose dates with surrounding context.
Users can enter a date in the input or choose one from the calendar.
Use a shared date pattern so users know what format to enter.
Label
Value
Input container
Month navigators
Month and year
Days
Current date
Container
Date range start
Date range selected
Date range end
Date
Use hint text to clarify the expected date format.
Default. Use when the label alone is enough.
Datepicker can collect a single date or a date range.
User picks one date from the calendar.
Restrict the selectable date window using minDate and maxDate as ISO strings.
All dates can be selected.
Control whether the calendar opens above or below the input.
Calendar drops below the input.
Disable the datepicker so users cannot change the value.
Default interactive state.
Show error styling and a feedback message when the date is invalid.
No feedback shown.
Use a value when the datepicker should open with an existing date or date range.
Use empty when the user must provide a new date.
Mark datepicker as required when the form cannot be submitted without a date.
Use optional when the date is not mandatory.
Use noFlip to prevent the calendar from changing direction automatically.
Allow the calendar to choose the best direction based on available space.
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-form-padding-x—sgds-form-padding-y—sgds-form-gap-md—sgds-form-gap-sm—sgds-font-size-14—sgds-font-size-label-sm—sgds-font-weight-semibold—sgds-line-height-2-xsHeight variessgds-line-height-20Height variessgds-line-height-2424pxsgds-dimension-4848pxsgds-dimension-160160pxsgds-dimension-320320pxsgds-icon-size-sm—sgds-form-border-radius-md—sgds-form-border-radius-sm—sgds-form-height-lgHeight variessgds-form-outline-focus—sgds-form-outline-offset-focus—sgds-form-width-mdWidth variesUse the datepicker when the day of the week or surrounding dates matter, such as appointments or travel.
For dates users can recall and type confidently, like a date of birth, a plain text input is faster.
Set minDate and maxDate to limit selection to valid dates. For example, future dates only when scheduling.
Use hintText to show the expected date format so users do not confuse day-month with month-day order.
TabShift+Tab↓ Downor↑ UpEnterEscShare them with us on Slack → #ask-sgds-v3
Report it on GitHub Issues → sgds/components/datepicker
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.