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
Campo numérico
Campo numérico
Las entradas numéricas son similares a las entradas de texto, pero se utilizan para introducir valores numéricos e incluye controles para aumentar o reducir el valor de forma incremental.
Usos
El input numérico normalmente se encuentra en formularios y se utiliza en situaciones en las que se espera que el usuario ingrese un número como una entrada válida.
Como usar
Recibiendo la edad de un usuario en un formulario.
Recibiendo la cantidad de unidades de un producto.
Recibiendo el monto de una transacción financiera.
Recibiendo el número de un teléfono o una tarjeta de crédito.
Como no usar
Recibiendo un nombre de usuario o una dirección de correo electrónico. Estos campos deben aceptar letras y caracteres especiales, no solo números.
Recibiendo una fecha. Es preferible usar un calendario para seleccionar una fecha en lugar de ingresar números manualmente.
Recibiendo una dirección. Es preferible usar un campo de texto para recibir una dirección en lugar de un input numérico.
Comportamiento
Tipos
Basic
Button
Estados
Default
Focus
Filled
Success
Error
Disabled
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.
Los inputs utilizan un elemento HTML básico input detrás de escena y ofrecen una funcionalidad y una API similares para sus usuarios.
La propiedad label siempre es necesaria para un control accesible del input.
Cuando el input esta deshabilitado, la propiedad “disabled” tiene valor "true", ya que también transmite esta información correctamente a las tecnologías de asistencia.
Las flechas del input tienen la propiedad aria-label.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
