Skip to main contentCarbon Design System

Date picker

The following page documents visual specifications such as color, typography, structure, size, and AI presence.

Color

Date picker color

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 state color


StateElementPropertyColor token
FocusFieldborder$focus
ErrorFieldborder$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
Field texttext-color$text-disabled
Field (default)border-bottomtransparent
Field (fluid)border-bottom$border-subtle *
Calendar iconsvg$icon-disabled
Read-onlyLabeltext-color$text-secondary
Field text (default)text-color$text-primary
Field (default)background-colortransparent
Field text (fluid)text-color$text-secondary
Field (fluid)background-color$field *
Chevron iconsvg$icon-disabled

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

Default date picker input states

Examples of date picker input states

Calendar menu color

ElementPropertyColor token
Calendarbackground-color$layer *
Calendar menubox-shadow0 2px 6px 0 rgba(0, 0, 0, 0.2)
Todaytext-color$link-01

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

Date picker calendar color example

Example of a date picker calendar menu.


Interactive state color


StateElementPropertyColor token
HoverDaybackground-color$layer-hover *
FocusDayborder$focus
DisabledDaytext-color$text-disabled
SelectedDaytext-color$text-on-color
background-color$background-brand
In rangeDaytext-color$text-primary
background-color$highlight
End rangeDaytext-color$text-primary
border$focus
Next monthDaytext-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).

Time picker color

The time picker is made up of text input and select input components.

ElementPropertyColor token
Labeltext-color$text-secondary
Fieldbackground-color$field *
border-bottom$border-strong *
dividers (fluid)$border-strong *
Field texttext-color$text-primary
Placeholder texttext-color$text-placeholder
Chevron iconsvg$icon-primary

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

Default time picker input colors

Interactive state color

The interactive state color example shown below is specificaly for text input. See the select input style tab for more details on select component interactive state colors.


StateElementPropertyColor token
FocusFieldborder$focus
ErrorFieldborder$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 *
Field texttext-color$text-disabled
Field (default)border-bottomtransparent
Field (fluid)border-bottom$border-subtle *
Chevron iconsvg$icon-disabled
Read-onlyLabeltext-color$text-secondary
Field text (default)text-color$text-primary
Field (default)background-colortransparent
Field text (fluid)text-color$text-secondary
Field (fluid)background-color$field *
Chevron iconsvg$icon-disabled

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

Default time picker input states

Examples of time picker input states

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 picker input structure

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 structure

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 structure

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.

Size

Default date picker input

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

Default time picker input

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 default style time picker input | px / rem

AI presence

The following are the unique styles applied to the components when the AI label is present. Unless specified, all other tokens in the components remain the same as the non-AI variants.

For more information on the AI style elements, see the Carbon for AI guidelines.

ElementPropertyToken / Size
Linear-gradientstart$ai-aura-start-sm
stop$ai-aura-stop
Fieldborder-bottom$ai-border-strong
background color$field *
AI labelsizemini

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

Structure and spacing default date picker with AI

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.