Selector de hora

Componentes

Selector de hora

Los selectores de tiempo ayudan a los usuarios a seleccionar y establecer un tiempo específico.

Vista Previa

Figma

Usos

Al hacer clic en el cuadro de entrada, podemos seleccionar una hora de un panel emergente.

Cuándo usar

Cuando el usuario necesite elegir una hora del día.

Cuándo no usar

Cuando el formato de la hora no sea relevante para el proceso o la tarea en cuestión.

Comportamiento

Tipos

Visualización de selector de hora por defecto

Default

Visualización del selector de hora con texto detalle

Detail

Estados

Placeholder

Visualización del selector de hora con el valor completado

Filled

Visualización del selector de hora con foco

Focus

Visualización del selector de hora deshabilitado

Disabled

Error

Visualización del selector de hora con mensaje de éxito

Success

Popover con desplegable arbitrario

Estados

Visualización del desplegable del selector de hora por defecto

Current

Hover

Focus

Visualización del desplegable del selector de hora con un elemento presionado

Pressed

Visualización del selector de hora con un elemento seleccionado

Selected

Disabled

Popover con desplegable simple

Estados

Visualización del listado de elementos del desplegable del selector de hora en modo simple

Current

Hover

Visualización de un elemento con foco activo del desplegable del selector de hora en modo simple

Focus

Visualización de un elemento presionado del desplegable del selector de hora en modo simple

Pressed

Visualización del un elemento del desplegable seleccionado del selector de hora en modo simple

Selected

isualización del un elemento deshabiolitado del desplegable del selector de hora en modo simple

Disabled

Responsive

En la versión móvil, de este componentes, los Popover aparecen como una modal, para mejorar la usabilidad y accesibilidad en este tipo de dispositivos.

Mobile

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

El time picker usa la propiedad input-label para un control accesible del componente.

El time picker tiene una entrada de hora y un botón de alternar para mostrar un selector de fecha que se construye usando un componente modal.

El modal de selección de hora permite moverse a través de scroll, mientras que en el modo arbitrary permite moverse con flechas y tabuladores.