Skip to main content


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

If a min date is set on the calendar, then any text appearing before that date will be #152935 @ 50%, otherwise all text should be #152935 (unless the number is selected or highlighted). Please refer to select, for inline select styling.


Example of a date picker Date picker example using both $field-02 (top) and $field-01 (bottom)


.bx--date-picker__input:focus ~ .bx--labelcolor$brand-01#3d70b2
.bx--date-picker__input[data-invalid]:focus + .bx--labelborder-bottom$support-01#e0182d
.bx--date-picker__input[data-invalid]:focus + .bx--labelborder-bottom$support-01#e0182d

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 appears at 50% opacity and has a .not-allowed cursor on hover.


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 style
.bx--label14 / 0.875Semi-Bold / 600.bx--type-zeta
.bx--time-picker__input-field:placeholder14 / 0.875Semi-Bold / 600.bx--type-zeta
.bx--time-picker__input-field active14 / 0.875Semi-Bold / 600.bx--type-zeta
.bx--form-requirement12 / 0.75Normal / 400.bx--type-caption


ClassLayer, ElevationBox-shadow
.bx--date-picker__calendarPop-out, 240 12px 24px 0 rgba(0, 0, 0, 0.1)


Simple and single date pickers

ClassPropertypx / remSpacing token
.bx--date-picker__inputheight40 / 2.5-
.bx--date-picker--short .bx--date-picker__inputwidth91 / 5.7-
.bx--date-picker--simple .bx--date-picker__inputwidth114 / 7.125-
.bx--date-picker--single .bx--date-picker__inputwidth144 / 9-
.bx--date-picker__iconheight & width16 / 1-
.bx--date-picker__calendarpadding-right, padding-left16 / 1$spacing-md
.bx--date-picker__icon + .bx--date-picker__inputpadding-left48 / 3$spacing-3xl

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

Range date picker

ClassPropertypx / remSpacing token
.bx--date-picker__inputheight230 / 14.375-
.bx--date-picker--range .bx--date-picker__inputwidth280 / 17.5-
.bx--date-picker__iconheight, width16 / 1- & width3px-
.bx--date-picker--range > .bx--date-picker-container:first-childmargin-right8 / 0.5$spacing-xs
.bx--date-picker__inputpadding-right, padding-left, padding-top16 / 1$spacing-md
.bx--date-picker__inputpadding-bottom4 / .25$spacing-2xs

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.

ClassPropertypx / remSpacing token
.bx--time-picker__input-fieldheight40 / 2.5-
.bx--time-picker__input-fieldwidth80 / 5-
.bx--time-picker__input-fieldpadding-right, padding-left16 / 1$spacing-md
.bx--select-inputpadding-left16 / 1$spacing-md

Structure and spacing for a time picker | px / rem