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.

If a min date is set on the calendar, then any text appearing before that date will be $disabled-03, otherwise all text should be $text-01 (unless the number is selected or highlighted).

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-03
.bx--date-picker__iconcolor$icon-01
calendarbackground-color$ui-01
calendarbox-shadow0 12px 24px 0
rgba(0, 0, 0, 0.1)
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
.todaybackground-color$interactive-01
Example of a date picker

Date picker example using both $field-02 (top) and $field-01 (bottom)

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
day:focusborder$focus
day:hoverbackground-color$hover-ui
.bx--label:disabledtext color$disabled-02
input:disabledbackground-color$disabled-01
input:disabledtext color$disabled-02
icon:disabledcolor$disabled-02

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.

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$body-short-01
.bx--form-requirement12 / 0.75Regular / 400$label-01

Structure

Simple date pickers

ClassPropertypx / remSpacing token
.bx--labelpadding-bottom8 / 0.5$spacing-03
.bx--date-picker__inputheight40 / 2.5
.bx--date-picker__inputborder-bottom1px-
.bx--date-picker__inputpadding-left, padding-right16 / 1$spacing-05
Structure for simple and single date pickers

Structure and spacing for simple and single date pickers | px / rem

Single & range date pickers

ClassPropertypx / remSpacing token
.bx--labelpadding-bottom8 / 0.5$spacing-03
.bx--date-picker__inputheight40 / 2.5
.bx--date-picker__inputwidth288 / 18
.bx--date-picker__inputpadding-right, padding-left16 / 1$spacing-05
.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