Skip to main contentCarbon Design System

Date picker


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__inputtext color$text-01
:placeholdertext color$text-05

Interactive states

ClassPropertyColor token
.bx--form-requirementtext color$support-01
.bx--label:disabledtext color$disabled-02
input:disabledtext color$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
calendarbox-shadow0 12px 24px 0
rgba(0, 0, 0, 0.1)
daytext color$text-01
day.selectedtext color$text-04
day.inRangetext color$interactive-01
day.nextMonthDaytext color$text-02
day:disabledtext color$text-02
Date picker calendar examples

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


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


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