Date Input

Ready

A date input is a user interface element where the user can type or select a date in a predefined format.

Code

Usage

Specifications

Date input

The date input color, typography, border, spacing, width and margin specifications are inherited from the text input, for reference check the text input component documentation.

The date input doesn't have the following text input elements or properties, therefore, their listed styles don't apply:

Prefix / Suffix
The size small is not available

Datepicker dialog

Structure and spacing for date picker calendar pop-up

Date specifications for picker — Structure and spacing for date picker calendar pop-up

States

Date input

States: enabled, hover, focus, error, and disabled.

Date dialog

States: enabled, hover, focus, and selected.

Anatomy

1.
Label
2.
Helper text (Optional)
3.
Input container
4.
Date button
5.
Clear action
6.
Error indicator
7.
Error message
8.
Placeholder / value

Design tokens

Color

Component token	Element	Core token	Value
`pickerBackgroundColor`	Dialog container	`color-white`	#ffffff
`pickerDayFontColor`	Dialog text	`color-black`	#000000
`pickerCurrentDateColor`	Dialog title	`color-grey-500`	#999999
`pickerHoverDateBackgroundColor`	Container background	`color-purple-200`	#e5d5f6
`pickerSelectedDateColor`	Date text:selected	`color-white`	#ffffff
`pickerSelectedDateBackgroundColor`	Date background:hover	`color-purple-700`	#5f249f
`pickerHoverDateFontColor`	Date text:hover	`color-black`	#000000
`pickerYearFontColor`	Year label	`color-black`	#000000
`pickerMonthFontColor`	Mont label	`color-black`	#000000
`pickerWeekFontColor`	Weekday label	`color-black`	#000000
`pickerMonthArrowsBackgroundColor`	Month selection controls	`color-transparent`	transparent
`pickerFocusColor`	Focus indicator	`color-blue-600`	#0095ff

Typography

Component token	Element	Core token	Value
`pickerFontFamily`	Datepicker dialog	font-family-sans`	'Open Sans', sans-serif

Property	Element	Core token	Value
`font-size`	Year selector	`font-scale-03`	1rem / 16px
`font-size`	Current month	-	13px
`font-size`	Day	-	13px
`font-weight`	Year selector	`font-weight-semibold`	600
`font-weight`	Current month	`font-weight-regular`	400
`font-weight`	Day	`font-weight-regular`	400

Spacing

Property	Element	Core token	Value
`padding`	Calendar container	`spacing-16`	1rem / 16px
`padding-left/right`	Month container	`spacing-8`	0.5rem / 8px
`padding-left/right`	Year selector	`spacing-16`	1rem / 16px
`padding-top/bottom`	Separator	`spacing-8`	0.5rem / 8px