Cómo permitir 2 decimales en un input type="number" en HTML

Al definir campos de formulario en HTML, uno de los casos más frecuentes es el de un campo numérico donde queremos controlar exactamente cuántos decimales puede ingresar el usuario. El ejemplo más clásico es el de un campo de precio: necesitamos dos decimales, ni más ni menos.

En este artículo vamos a ver cómo podemos limitar la cantidad de decimales en un <input type="number"> en HTML, usando tanto atributos nativos del elemento como un pequeño refuerzo con JavaScript para garantizar el formato correcto.

El elemento <input type="number"> en HTML permite a los usuarios ingresar valores numéricos; sin embargo, por defecto, no permite limitar la cantidad de decimales mediante un atributo que indique la cantidad mínima o base de definir la cantidad de decimales.

El atributo step: la clave para aceptar decimales

Por defecto, un <input type="number"> solo acepta números enteros. Si intentas escribir 1.5 sin configurar nada más, el campo lo puede rechazar o mostrar como inválido según el navegador. Para habilitar los decimales, necesitamos el atributo step.

El atributo step define el intervalo entre los valores válidos del campo. Cuando lo configuramos a 0.01, le estamos diciendo al navegador que cualquier valor con hasta dos decimales es aceptable.

<input type="number" step="0.01" id="price">

Con esto, el campo ya acepta valores decimales como 9.99, 0.50 o 100.00. También funciona con las flechas de incremento del navegador: cada clic sube o baja el valor en 0.01.

Importante: el atributo step define el intervalo de valores válidos, pero no impide que el usuario escriba más decimales de los esperados. Un usuario podría tipear 9.9999 y el navegador lo mostraría, aunque marcaría el campo como inválido al enviar el formulario. Para forzar el redondeo en tiempo real, es necesario combinar step con JavaScript.

Variantes del atributo step según la cantidad de decimales

El valor de step determina directamente la cantidad de decimales que se permiten. Estos son los casos más comunes:

• step="0.01" → permite hasta 2 decimales (ideal para precios y montos)
• step="0.001" → permite hasta 3 decimales (útil para porcentajes finos o dosificaciones)
• step="0.1" → permite hasta 1 decimal
• step="any" → acepta cualquier valor decimal sin restricción de intervalo

Por ejemplo, para un campo de porcentaje con dos decimales:

<input type="number" step="0.01" min="0" max="100" id="percentage">

Forzar exactamente 2 decimales con JavaScript

Si necesitas que el campo siempre muestre exactamente dos decimales, incluso cuando el usuario ingresa un número entero como 5, la solución es combinar el atributo step con un manejador de eventos en JavaScript que use el método toFixed(2).

Primero, el HTML del campo con step="0.01":

<input type="number" step="0.01" id="price">

Luego, el bloque de JavaScript que asegura el formato en tiempo real:

const priceInput = document.getElementById("price");

// Manejador que asegura que el valor tenga exactamente dos decimales al modificarse
priceInput.addEventListener("input", function (event) {
    const value = event.target.valueAsNumber;

    // Verificamos que sea un número válido antes de reformatear
    if (!isNaN(value)) {
        event.target.value = value.toFixed(2);
    }
});

El método valueAsNumber retorna el valor del campo como un número de punto flotante, y toFixed(2) lo formatea con exactamente dos decimales, redondeando si es necesario. De esta forma, si el usuario escribe 9.999, el campo mostrará automáticamente 10.00.

¿Y el atributo inputmode?

Aunque no controla la cantidad de decimales, el atributo inputmode="decimal" es muy útil en dispositivos móviles. Le indica al navegador que muestre el teclado numérico con soporte para el separador decimal, lo que mejora notablemente la experiencia del usuario en pantallas táctiles.

<input type="number" step="0.01" inputmode="decimal" id="price">

La diferencia clave: inputmode solo afecta al teclado virtual que se muestra, sin cambiar el comportamiento de validación del campo. Es un complemento, no un reemplazo del atributo step.

Resumen

Para permitir decimales en un <input type="number"> en HTML, la solución nativa es usar el atributo step:

• Para 2 decimales: step="0.01"
• Para 3 decimales: step="0.001"
• Para cualquier decimal sin restricción de intervalo: step="any"

Si además necesitas garantizar que el valor siempre se muestre con exactamente dos cifras decimales, añade un listener de JavaScript con toFixed(2). Y si el campo va a usarse en móvil, combínalo con inputmode="decimal" para mejorar la experiencia con el teclado táctil.