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.

Default date picker input colors

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
Default 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

Default input

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 default date picker inputs | px / rem

Fluid input

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

ElementPropertypx / remSpacing token
Labelpadding-bottom4 / 0.25$spacing-02
Fieldheight64 / 4$spacing-10
padding-left, padding-right16 / 1$spacing-05
padding-top, padding-bottom13 / 0.8125
border-bottom1px
Calendar iconheight, width16 / 1
padding-left8 / 0.5$spacing-03
Focusborder2px
Errorborder2px
Structure for date picker inputs

Structure and spacing for fluid date picker inputs | 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

The time picker is a combination of a text input and select component. Refer to each component page for further details.

Default input

The widths of the time picker may vary based on the grid and layout.

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

Fluid input

The width of each component in the fluid time picker is a percentage of the group. Time picker’s total width will vary based on the grid and layout

ElementPropertypx / remSpacing token
Labelpadding-bottom4 / 0.25$spacing-02
Fieldheight64 / 4
padding-right, padding-left16 / 1$spacing-05
Dividerwidth1px
Time inputwidth25% or 50%
Clock selectwidth25% or 50%
Timezone selectwidth50%
Structure for a time picker

Structure and spacing for a time picker | px / rem

Structure for a time picker

The width of each component in the fluid time picker is a percentage of the group.

Sizes

Default inputs

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