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

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 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

Button

Estados

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

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.