Time Pickers CD v1.0
Time Pickers assist users in selecting and setting a specific time.
- Overview
- Specs
- Guidelines
Component
Time Pickers are graphical user interface elements that allow users to select and set a specific time, typically in hours and minutes.
- Icon: A visual indicator that signifies a time-related input, providing additional context and support.
- Day, Hour, Minute, and Second Fields: Text input fields where users enter the days, hours, minutes, and seconds of the desired time.
- Label: Guides users on how to interact with the control.
- Date Field: A text input field allowing users to manually enter the date.
- AM/PM Selector: Allows users to choose the time period.
Used for
Task Management:
Time Pickers help users set deadlines or due times for tasks or assignments.
Time-based Settings:
In applications or devices, timepickers are used to configure time-based settings, such as alarm clocks or reminders.
Appointment Scheduling:
Timepickers allow users to select the exact time for appointments or meetings.
Don’t use for:
Non-time Related Inputs:
Time Pickers are not suitable for inputting non-time-related information, such as text or numerical data.
Date Selection:
While timepickers handle time-related inputs, they do not typically accommodate date selection. For that purpose, datepickers are more appropriate.
Complex Time Calculations:
Timepickers are designed for simple time selection and are not well-suited for complex time calculations or manipulations.
Demo
Access the Figma file and inspect the element using Dev Mode.
Related
States
1 – Enable
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-5, #CBD3DB);
background: var(--Greys-Grey-1, #FEFEFE);2 – Hover
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-6, #ADB7C5);
background: var(--Greys-Grey-1, #FEFEFE);3 – Focus
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Theme-Theme-100, #0046FE);
background: var(--Greys-Grey-1, #FEFEFE);4 – Read-Only
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-3, #F3F7FE);
background: var(--Greys-Grey-1, #FEFEFE);5 – Disable
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Greys-Grey-5, #CBD3DB);
background: var(--Greys-Grey-3, #F3F7FE);6 – Error
border-radius: var(--Border-Radius-x-small-radius, 4px);
border: 1px solid var(--Error-Error-100, #C00E19);
background: var(--Greys-Grey-1, #FEFEFE);Sizes
- Small: Use in situations where space is limited or when incorporating a drop-down within a lengthy and intricate form.
- Regular: This is the standard size and it’s widely used. When in doubt, opt for the medium size.
- Large: Opt for this size when you have plenty of space available. It’s commonly used in straightforward forms when isolated on a page, for example, for filtering purposes.
Small
.small{
display: flex;
width: 300px;
height: var(--Spacing-spacing-28, 28px);
padding: 0px var(--Sizing-x-small, 8px);
align-items: center;
gap: var(--Spacing-spacing-4, 4px);
flex-shrink: 0;
}Regular
.regular{
display: flex;
width: 300px;
height: 36px;
padding: 0px var(--Sizing-x-small, 8px);
align-items: center;
gap: var(--Spacing-spacing-8, 8px);
flex-shrink: 0;
}Large
.large{
display: flex;
width: 300px;
height: var(--Spacing-spacing-40, 40px);
padding: 0px var(--Sizing-x-small, 8px);
align-items: center;
gap: var(--Spacing-spacing-8, 8px);
flex-shrink: 0;
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Usage
Time Pickers allow people to enter a specific time value. They’re displayed in dialogs and can be used to select hours, minutes, or periods of time.
Time by days function
The time by days function of the Time Picker allows people to specify an amount of days instead of having to calculate those days in hours.
24 or 12-hour time format
This selection is automatically assigned to the component depending on your Cegid ID configurations.
- Both the 12-hour and 24-hour time systems are supported.
- When using the 12-hour format, it must be accompanied by an AM/PM selection.
- Use uppercase letters and no periods for the abbreviations AM and PM.
- Specific times should include a timezone specification.
Universal behaviors
The behaviors outlined in this section apply universally across all variants. For variant-specific behaviors, refer to the respective sections for each component variant below.
States
Time Pickers are texts inputs and have the same interactive states and behaviors.
| State | When to use |
|---|---|
| Enabled | When the date or Time Picker is live, but a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component. |
| Hover | When a user’s mouse cursor is hovering over the field. |
| Focus | When a user tabs to or clicks into the input, the field becomes focused, indicating the user has successfully navigated to the component. |
| Read-only | When the user can review but not modify the component. This state removes all interactive functions, like the disabled state, but can still be focusable, accessible by screen readers, and pass visual contrast for readability. |
| Error | When the required field for a text input in the date or Time Picker component has not been filled in, or when a selection in the Time Picker component does not have a selection. It can also be triggered due to a system error. This state requires a user response before data can be submitted or saved. |
| Disable | When the user cannot interact with a component and all interactive functions have been removed. Unlike read-only states, disabled states are not focusable, are not read by screen readers, and do not need to pass visual contrast, making them inaccessible if they need to be interpreted. |
Validation
Invalid fields need to be clearly indicated. When dealing with pickers containing multiple fields, the invalid state should only be applied to the specific field causing the error. This helps users identify which aspect needs attention.
Variation
We also have a variation that includes the Date Picker features, but this is rarely used and not recommended;
For more detailed information, please read the guidelines.
Internationalization
Internationalization, also referred to as globalization, refers to software adapting to different languages, regional peculiarities, and technical requirements of a target locale without additional code changes. This means that if the location is known, then, the formatting of a date or time can automatically change to the acceptable local format. You should always try to design for internationalization.
When to use
Use Time Pickers when a specific time needs to be scheduled, such as planning a meeting time.
Case Studies
Why Web Accessibility Matters – And How to Start
Writing for Everyone: Every Word Counts in Accessibility
