A date picker is a component used in web forms and applications that allow users to select dates through a calendar-style interface. The primary purpose is to provide an intuitive way for users to input or choose specific dates.
Color
Primary Color
| Element | Property | Color token |
|---|
| Label | text color | $text-secondary |
| Field | background-color | $layer-02 |
| | border-bottom | $border-subtle-01 |
| Field text | text color | $text-primary |
| Placeholder text | text color | $text-placeholder |
| Calendar icon | svg | $icon-secondary |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Label | 14 / 0.875 | Semibold / 600 | $heading-compact-02 |
| Field text | 14 / 0.875 | Regular / 400 | $body-compact-02 |
| Helper text | 12 / 0.75 | Regular / 400 | $helper-text-02 |
Structure
| Element | Property | px / rem | Spacing token |
|---|
| Label | margin-bottom | 8 / 0.5 | $spacing-03 |
| Field | border-bottom | 1px | – |
| Calendar icon | width | 15px | – |
| | padding-left | 24 / 1.5 | $spacing-06 |
