Government of Spain Dintel, Sistema de Diseño Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support
Components Time selector

Time selector

Time selectors help users to select and set a specific time.

Preview

Figma
Time selector preview

Uses

By clicking on the input box, we can select an hour from a pop-up panel.

When to use

When the user needs to choose an hour of the day.

When not to use

When the time format is not relevant to the process or task in question.

Behaviour

Types

Display of the default time selector
Default
Display of the time selector with text detail
Detail

States

Display of the timepicker with placeholder text
Placeholder
Displaying the Time Selector with the Completed Value
Filled
Display of the time selector with focus
Focus
Display of the Disabled Time Selector
Disabled
Display of the time selector with error message
Error
Display of the time selector with success message
Success

Popover with arbitrary drop-down

States

Display of the default time selector drop-down
Current
Display of the time selector drop-down in hover state
Hover
Display of the time selector drop-down with focus on a focus element
Focus
Display the time selector’s drop-down with a pressed item
Pressed
Display of the time selector with a selected item
Selected
Display of the Disabled Time Selector
Disabled

Popover with simple drop-down

States

Display the list of elements of the time selector drop-down in simple mode
Current
Display the hover state of an item from the time selector drop-down in simple mode
Hover
Display of an item with active focus of the time selector drop-down in simple mode
Focus
Displaying a pressed item of the time selector drop-down in simple mode
Pressed
Display the one element of the selected time selector drop-down in simple mode
Selected
isualization of a disabled element of the time selector drop-down in simple mode
Disabled

Responsive

In the mobile version, of this component, the Popovers appear as a modal, to improve usability and accessibility in this type of device.

Time selector display in mobile"
Mobile

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The time picker uses the input-label property for an accessible control of the component. The time picker has a time entry and a toggle button to display a date picker that is built using a modal component. The time selection mode allows you to move through scrolling, while in the arbitrary mode it allows you to move with arrows and tabs.
Funded by the European Union NextGenerationEU, opens in new tab Recovery Plan, Transformation and Resilience, opens in new tab Digital Spain, opens in new tab Support Accessibility Web Map Cookies Policy

This website uses its own and third-party cookies to offer a better service. If you continue browsing, we consider that you accept its use.