Number input
Campo numérico
Actualizado el 14/03/2024
Campo numérico
El campo numérico sólo permiten valores numéricos y cuentan con controles que permiten el incremento o decremento del valor que contiene.
<> Código
× Ocultar Código
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item ulpgcds-form__item--type-numeric">
<label for="number-input">Etiqueta</label>
<input id="number-input" max="99" min="0" step="1" type="number" value="0" />
</div>
</form> Variantes
Con texto de ayuda
<> Código
× Ocultar Código
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item ulpgcds-form__item--type-numeric">
<label for="number-input">Etiqueta</label>
<input id="number-input" max="99" min="0" step="1" type="number" value="0" />
<div class="help-text">Texto de ayuda</div>
</div>
</form> Con error
<> Código
× Ocultar Código
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item ulpgcds-form__item--type-numeric">
<label for="number-input">Etiqueta</label>
<input id="number-input" max="99" min="0" step="1" type="number" value="0" required="required" class="ulpgcds-form__item__error"/>
<div class="help-text">Texto de ayuda</div>
</div>
</form> Campo numérico con icono
<> Código
× Ocultar Código
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item">
<label for="text-input-id6">Nombre de usuario</label>
<input id="text-input-id6" name="text-input" placeholder="Introduce tu email" type="number" class="ulpgcds-form__item--icon" />
<span class="ulpgcds-icon-file"></span>
<div class="help-text">Esto es un texto de ayuda</div>
</div>
</form> Uso del componente
El campo numérico es un componente peculiar que permite la inserción en exclusiva de una valor numérico entero. Su uso puede ser muy variado pero se suele emplear principalmente en formularios.
Buenas prácticas:
- Sea claro y conciso en el texto de las etiquetas. No emplee textos que el usuario no tiene porque conocer previamente.
- Es conveniente evitar que texto de la etiqueta este escrito en mayúsculas, esto puede dificultar la experiencia del usuario.
- Siempre que sea posible, incluya ayuda programada. Por ejemplo, detecte y rellene los campos de los que ya disponga información. Esto previene errores y facilita la tarea del usuario.
- Siempre que sea posible, intente alinear todos los campos de formulario en una sola columna.
- En el caso de formularios muy largos, es conveniente agrupar los elementos de formulario por contexto.
- Si, en un formulario, la mayoría de los campos son obligatorios, es más adecuado destacar aquellos que son opcionales.
- Si se comete un error al completar un formulario, los campos que provocan dicho error deben ser fácilmente identificables y siempre acompañados de la razón del error.
- En ocasiones, puede ser interesante ofrecer algún texto de ayuda al usuario que se mantenga visible en todo momento y muestre pautas relativas al campo. Este texto de ayuda solo debe emplearse en aquellos campos de formularios que se consideren complejos o propensos al error.
- Emplee los campos numéricos para cambios de valor pequeños que se puedan realizar en pocos clicks. Si espera un rango de valores muy alto es preferible emplear un campo de texto.
- En el caso de los campos numéricos, es importante que el valor por defecto se muestre dentro del campo.
- Permita que el usuario pueda insertar el valor deseado con el teclado.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| form.ulpgcds-form | Necesario en el formulario dónde se introducen los campos numéricos |
| form div.ulpgcds-form__item | Cada fila correspondiente al componente del formulario |
| form div.ulpgcds-form__item--icon | Variación para campos numéricos con icono |
| form div.help-text | Texto de ayuda debajo del campo |
| form div input.form-item__error | Indica que ese componente tiene un error |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.
Image
Estado del componente
Estable