Anatomy
|
Item |
Name |
Description |
Component |
Optional |
|---|---|---|---|---|
|
1 |
Time Picker Input |
Form field to select a Time |
|
|
|
2 |
Time Icon |
Opens the Dropdown |
|
|
|
3 |
Dropdown |
Dropdown to select specific time |
Dropdown |
|
Specification & Properties
Spacing
|
Property |
Value |
Token |
|---|---|---|
|
Padding |
8px |
.100 |
|
Element Spacing |
8px |
.100 |
|
Component spacing |
4px |
.50 |
Building blocks
Text Input
The field to select the Date is follow the same state as all our other fields. If you want to know more about the sates go to Form Field
Dropdown
The dropdown serves as an integral component within the time picker. Its behavior aligns with our background.interactive.neutral design pattern to ensure consistency.
Layout
Desktop vs. Mobile
For the Time Picker component, on desktop devices, it appears in a dropdown menu, while on mobile devices, it is presented within a drawer.
