Time picker

Definition: A time picker is an element for choosing a specific time.

inputs

#252626
#c3d0d9
text-default
Default text refers to the main or prominent textual content. Suitable for important headlines, titles, or primary information that requires the most attention.
#494a4a
#c3d0d9
text-secondary
Secondary text is for supporting or supplementary information. Often used for descriptions, labels, captions, or any content that is less significant than the default text but still relevant to the user experience.
#8a8a8a
#9aa5ae
text-disabled
Disabled text refers to a particular element is temporarily or permanently disabled and cannot be accessed or interacted with.
#a12036
#f1bdc4
text-mandatory
Mandatory text refers to text or information that is required in a particular context.
#a12036
#f1bdc4
text-error
Error text refers to incorrect or invalid information on a form or during a data entry process.
#494a4a
#e4ebf0
icon-default
Default icon refers to the standard or pre-set icon. Suitable for operating systems or software programs as a generic placeholder.
#1482cc
#419bd7
icon-emphasis
Emphasized text refers to a styling technique used to give importance to a specific text. Often used to draw attention to key points, important information, or to differentiate specific content from the rest of the text.
#4e9c54
#7faf7f
icon-success
Success icon serves as a visual cue to convey that a task, action, or process has been completed successfully.
#8a8a8a
#9aa5ae
icon-disabled
Disabled icon indicates that a particular function, feature, or control is currently disabled or unavailable.
#ffffff
#2b3033
surface-enabled
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
#f2f2f2
rgba(76,84,91,0.24)
surface-muted
Muted surface indicates that the ui element is not editable and is intended for viewing purposes only. Suitable for read-only UI controls.
#ffffff
#e4ebf0
surface-transparent
Transparent surface is intented to create a subtle and understated appearance. Suitable for the less important ui control.
#ffffff
#2b3033
surface-hover
Surface on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
#dadada
#000000
surface-pressed
Surface with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
#f2f2f2
#2b3033
surface-selected
Surface with moderate selected state refers to an interaction that occurs when the ui element is active. Suitable for subtle appearance that should not dominate the overall design when the ui element is active.
#d2eafa
#4c545b
surface-selected:hover
Surface hovering over a moderate selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
#ffffff
#2b3033
surface-disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
#ffffff
#2b3033
surface-error
Surface on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
#8a8a8a
#6f7a82
border-enabled
Border on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
#f2f2f2
#4c545b
border-muted
Muted border indicates that the ui element is not editable and is intended for viewing purposes only. Suitable for read-only UI controls.
#ffffff
#e4ebf0
border-transparent
Transparent border is intented to create a subtle and understated appearance. Suitable for the less important ui control.
#1482cc
#9aa5ae
border-hover
Border on hover state refers to an interaction that the ui element is clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
#1482cc
#e4ebf0
border-focused
Border on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
#8a8a8a
#6f7a82
border-pressed
Border with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
#8a8a8a
#6f7a82
border-selected
Border with a moderate selected state refers to an interaction that occurs when the ui element is active.
#1482cc
#9aa5ae
border-selected:hover
Border hovering over a moderate selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
#c0c0c0
#4c545b
border-disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
#cc334c
#db6b7d
border-error
Destructive border on enabled state serves as a prominent reminder or warning, helping prevent accidental or unintended actions that could have negative implications.