A Time Picker allows users to quickly enter a desired time in 12 hour format. They can do this by entering a precise time via their keyboard, or selecting from a predefined list of times via a popover menu.
Anatomy
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Field label |
Mandatory textual label used to describe the form field to guide users in filling it. |
No |
|
2. Required or optional marker |
Textual label used to denote if a field is required or optional. Marker’s copy is not changeable. |
Yes |
|
3. Helper text |
Additional description helping users provide the right input, if the field label is insufficient. |
Yes |
|
4. Helper link |
Link to resources that provide additional explanation, for example, Octopus Docs. Link label’s copy is not changeable. |
Yes |
|
5. Field |
Input element that allows users to write content. |
No |
|
6. Suffix |
Icon or text that can be optionally included in a text field to transform it into a select field or provide guidance for unit types. |
Yes |
|
7. Popover |
Scrollable select dropdown that can be pre-filled with multiple textual options. |
No |
|
8. Option |
Singular selectable option. |
No |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
Component dependencies
This component is internally dependent on the following form sub-components:
|
Figma |
Code |
|---|---|
|
TextField |
TextField |
|
Popover Basic |
Popover |
|
Button |
Button |
|
ChevronDownIcon |
ChevronDownIcon |
|
ChevronUpIcon |
ChevronUpIcon |
Code sub-components
Refer to the code documentation for further information.
It’s also dependent on: