Logo Gobierno de España Logo DINTEL · Sistema de diseño Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Primeros pasos ¿Qué es DINTEL? Diseñadores Desarrolladores Recursos Preguntas frecuentes Fundamentos Fundamentos Color Tipografía Elevaciones Espaciado Retícula Borde Radio Iconografía Ilustraciones Animación Accesibilidad Tokens de diseño Contenidos digitales Visualización de datos Elementos de interfaz Elementos de interfaz Módulos Plantillas Componentes Actualizaciones Contacto
Elementos de interfaz Componentes Selector de hora

Selector de hora

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

Vista previa

Vista previa del componente selector de hora

Usos

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

Como usar

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

Como 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

Display of the timepicker with placeholder text

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

Visualización del selector de hora con mensaje de error

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

Visualización del desplegable del selector de hora en estado hover

Hover

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

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

Visualización del selector de hora deshabilitado

Disabled

Popover con desplegable simple

Estados

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

Current

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

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

Visualizació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.

Visualización del selector de hora en mobile

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.

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

 Logo de Financiación por la Unión Europea NextGenerationEU Logo de Plan de Recuperación Transformación y Resiliencia Logo España digital Aviso legal Accesibilidad Política de Cookies Contacto Mapa web