Skip to main contentCarbon Design System

Date picker

Color

Date input

ElementPropertyColor token
Labeltext-color$text-secondary
Fieldbackground-color$field *
border-bottom$border-strong *
Field texttext-color$text-primary
Placeholder texttext-color$text-placeholder
Helper texttext-color$text-helper
Calendar iconsvg$icon-primary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Date picker input states

Interactive states


StateElementPropertyColor token
FocusFieldborder$focus
InvalidFieldborder$support-error
Error messagetext-color$text-error
Error iconsvg$support-error
WarningWarning messagetext-color$text-primary
Warning iconsvg$support-warning
DisabledLabeltext-color$text-disabled
Fieldbackground-color$field
Fieldborder-bottomtransparent
Field texttext-color$text-disabled
Calendar iconsvg$icon-disabled
Date picker input states

Examples of date picker input states

Calendar menu

ElementPropertyColor token
Calendarbackground-color$layer *
Calendar menubox-shadow0 2px 6px 0 rgba(0, 0, 0, 0.2)
Todaytext-color$link-01
Daytext-color$text-primary
Day: hoverbackground-color$layer-hover *
Day: focusborder$focus
Day: disabledtext-color$text-disabled
Day: selectedtext-color$text-on-color
background-color$background-brand
Day: in rangetext-color$text-primary
background-color$highlight
Day: end rangetext-color$text-primary
border$focus
Day: next month daytext-color$text-secondary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Date picker calendar examples

Example of a single date calendar picker (left) and a date range calendar picker (right).

Typography

Labels should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized, and no more than three words.

ElementFont-sizeFont-weightType token
Label12 / 0.75Regular / 400$label-01
Field text14 / 0.875Regular / 400$code-02
Helper text12 / 0.75Regular / 400$label-01
Error message12 / 0.75Regular / 400$label-01
Warning message12 / 0.75Regular / 400$label-01
Month and year14 / 0.875SemiBold / 600$heading-compact-01
Day14 / 0.875Regular / 400$body-compact-01

Structure

Date inputs

The widths of the date inputs may vary based on the grid and layout.

ElementPropertypx / remSpacing token
Labelmargin-bottom8 / 0.5$spacing-03
Fieldpadding-left, padding-right16 / 1$spacing-05
border-bottom1px
Helper textmargin-top4 / .25$spacing-02
Calendar iconheight, width16 / 1
padding-left8 / 0.5$spacing-03
Structure for date picker inputs

Structure and spacing for date picker inputs | px / rem

Sizes

ElementSizeHeight px / rem
FieldSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Sizes for simple and single date calendar sizes

Sizes for simple and single date calendar sizes | px / rem

Calendar menu

ElementPropertypx / remSpacing token
Calendar menuheight336 / 21
width288 / 18
padding-top, padding-right, padding-left4 / 0.25$spacing-02
padding-bottom8 / 0.5$spacing-03
Dayheight, width40 / 2.5
Today: dotheight, width4 / 0.25
Structure for date picker

Structure for date picker | px / rem

Spacing for date picker

Spacing for date picker | px / rem

Time picker

There are two types of time pickers; a 12-hour and 24-hour time picker. The 12-hour Time Picker is accompanied by a time period (am/pm) input, while the 24-hour clock is not. Refer to select for inline select styling.

ElementPropertypx / remSpacing token
Labelpadding-bottom8 / 0.5$spacing-03
Fieldheight40 / 2.5-
padding-right, padding-left16 / 1$spacing-05
Selectpadding-right, padding-left16 / 1$spacing-05
Structure for a time picker

Structure and spacing for a time picker | px / rem