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
Field text: prompttext-color$text-helper
Calendar iconsvg$icon-primary

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-disabled
Field texttext-color$text-disabled
Calendar iconsvg$icon-disabled
Date picker input states

Examples of date picker input states

Active: Placeholder text should remain when the user clicks into the text input and gets a cursor. Once the user starts typing the hint text is replaced with the user input text.

Error: Error messages appear below the input field and are always present while invalid.

Disabled: Disabled state should have a .not-allowed cursor on hover.

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: selectedtext-color$text-on-color
background-color$background-brand
Day: disabledtext-color$text-disabled
Day: in rangetext-color$text-primary
background-color$highlight
Day: end rangetext-color$text-primary
border$focus
Day: next month daytext-color$text-secondary
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
Error message12 / 0.75Regular / 400$label-01

Structure

Date inputs

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

ElementPropertypx / remSpacing token
Labelpadding-bottom8 / 0.5$spacing-03
Fieldpadding-left, padding-right16 / 1$spacing-05
border-bottom1px-
Structure for date picker inputs

Structure and spacing for date picker inputs | px / rem

Sizes

ElementPropertySizepx / rem
FieldheightSmall32 / 2
heightDefault40 / 2.5
heightLarge48 / 3
Sizes for date picker inputs

Sizes for date picker inputs | px / rem

Calendar menu

ElementPropertypx / remSpacing token
Calendarheight336 / 21–
width288 / 18–
padding-top, padding-right, padding-left4 / 0.25$spacing-02
padding-bottom8 / 0.5$spacing-03
Calendar: iconheight, width16 / 1–
padding-right, padding-left16 / 1$spacing-05
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