Skip to main contentCarbon Design System

Date picker

Color

Inputs come in two different colors. The default input color is $field-01 and is used on $ui-background and $ui-02 page backgrounds. The light version input color is $field-02 and is used on $ui-01 page backgrounds.

Date input

ClassPropertyColor token
.bx--labeltext color$text-02
.bx--date-picker__inputbackground-color$field-01
.bx--date-picker__input
.bx--text-input--light
background-color$field-02
.bx--date-picker__inputborder-bottom$ui-04
.bx--date-picker__inputtext color$text-01
:placeholdertext color$text-05
.bx--date-picker__iconcolor$icon-01

Interactive states


ClassPropertyColor token
input:focusborder$focus
input[data-invalid]border-bottom$support-01
.bx--form-requirementtext color$support-01
input[data-invalid]:focusborder-bottom$support-01
.bx--label:disabledtext color$disabled-02
input:disabledbackground-color$disabled-01
input:disabledtext color$disabled-02
icon:disabledcolor$disabled-02
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

ClassPropertyColor token
calendarbackground-color$ui-01
calendarbox-shadow0 12px 24px 0
rgba(0, 0, 0, 0.1)
todaybackground-color$interactive-01
daytext color$text-01
day.selectedtext color$text-04
day.selectedbackground-color$interactive-01
day.inRangetext color$interactive-01
day.endRangeborder$interactive-01
day.nextMonthDaytext color$text-02
day:focusborder$focus
day:hoverbackground-color$hover-ui
day:disabledtext color$text-02
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.

ClassFont-sizeFont-weightType token
.bx--label14 / 0.875Regular / 400$label-01
.bx--date-picker__input14 / 0.875Regular / 400$code-02
.bx--form-requirement12 / 0.75Regular / 400$label-01

Structure

Date inputs

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

ClassPropertypx / remSpacing token
.bx--labelpadding-bottom8 / 0.5$spacing-03
.bx--date-picker__inputpadding-left, padding-right16 / 1$spacing-05
.bx--date-picker__inputborder-bottom1px-
.bx--date-picker__inputheight40 / 2.5–
.bx--date-picker__input--xlheight48 / 3–
.bx--date-picker__input--smheight32 / 2–
Structure for date picker inputs

Structure and spacing for date picker inputs | px / rem

Sizes for date picker inputs

Sizes for date picker inputs | px / rem

Calendar menu

ClassPropertypx / remSpacing token
.bx--date-picker__calendarheight336 / 21–
.bx--date-picker__calendarwidth288–
.bx--date-picker__calendarpadding-top, padding-right, padding-left4 / 0.25$spacing-02
.bx--date-picker__calendarpadding-bottom8 / 0.5$spacing-03
.bx--date-picker__iconheight, width16 / 1–
.bx--date-picker__iconpadding-right, padding-left16 / 1$spacing-05
.today dotheight & width4 /0.25–
dayheight & width40 / 2.5–
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.

ClassPropertypx / remSpacing token
.bx--labelpadding-bottom8 / 0.5$spacing-03
.bx--time-picker__input-fieldheight40 / 2.5-
.bx--time-picker__input-fieldpadding-right, padding-left16 / 1$spacing-05
.bx--select-inputpadding-right, padding-left16 / 1$spacing-05
Structure for a time picker

Structure and spacing for a time picker | px / rem