Gobierno de España Dintel Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Fundamentos Componentes Módulos Plantillas Tokens Soporte

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.

Vista Previa

Figma
Vista previa campo numérico

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.

Cuándo usar

Recibiendo la edad de un usuario en un formulario. Recibiendo la edad de un usuario en un formulario. Recibiendo el monto de una transacción financiera. Recibiendo el número de un teléfono o una tarjeta de crédito.

Cuándo 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

Visualización del campo numérico por defecto
Basic
Visualización del campo numérico con botón
Button

Estados

Visualización del campo numérico por defecto
Default
Visualización del campo numérico con foco
Focus
Visualización del campo numérico con valor completado
Filled
Visualización del campo numérico con mensaje de éxito
Success
Visualización del campo numérico con mensaje de error
Error
Visualización del campo numérico deshabilitado
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.