Definición
En los campos abiertos, la persona usuaria puede introducir un valor de forma manual. Las características del campo deben ajustarse al valor esperado (longitud, tipo de valores...). Por ejemplo, si se espera que la persona usuaria introduzca varias líneas de texto, hay que usar el tipo área de texto en lugar de un campo de texto.
Anatomía
Las partes del componente son:
- Etiqueta: Breve texto que recoge el contenido que se debe introducir en el campo. Si el campo es obligatorio, se incluirá un asterisco junto a la etiqueta.
- Campo: Contenedor en el que la persona usuaria introduce el texto. Una vez relleno, puede tomar un color de la paleta de estados en función del resultado de la validación.
- Sugerencia (opcional): Se coloca dentro del campo de texto, y desaparece al activar el campo. Se utiliza para ejemplificar el tipo de información esperada.
- Mensaje de aprobación o error (opcional): Aparece tras desactivarse el foco en el campo, y avisa sobre si el valor introducido es correcto. Toma el color de la paleta de estados.
- Icono de mostrar/ocultar (opcional): Si se introduce información confidencial ofuscada por defecto (p.ej. una contraseña), este icono permite mostrar en pantalla los caracteres introducidos.
Tipos
Se dispone de varios tipos que atienden a diversas necesidades.
Campos de texto
Se utilizan para introducir un texto de una sola línea, como el nombre o la dirección de correo electrónico.
Campo numérico
Es un campo que permite incluir solo caracteres numéricos.
Campo confidencial
En este tipo de campos, el valor introducido se enmascara por defecto para proteger la confidencialidad. Opcionalmente, se puede introducir un icono de mostrar/ocultar, que permita desactivar el enmascaramiento. Esto es especialmente útil en dispositivos móviles, donde se cometen más errores al escribir.
Áreas de texto
Permite la introducción de un texto de varias líneas. El tamaño debe ajustarse a la longitud de texto esperada.
Estados
Deshabilitado
En este estado el usuario no puede introducir datos. Es posible que el campo contenga un valor, en cuyo caso no se puede modificar.
Pautas de uso
Aclara el contenido que debe introducirse en el campo
- Incluye sobre el campo una etiqueta que sea breve, precisa y clara. Intenta utilizar dos o tres palabras como máximo, y evita partículas innecesarias.
- Si el campo es obligatorio, incluye un asterisco tras la etiqueta del campo.
- Si incluyes una sugerencia dentro del campo, utilízala para ejemplificar el valor. Ten en cuenta que la persona usuaria no podrá verla mientras rellena el campo.
Valida el campo cuando terminen de rellenarlo
Una vez que la persona usuaria ha terminado de rellenar el campo, valida que está correctamente relleno:
- Si el campo es obligatorio, comprueba que se ha rellenado.
- Si el valor del campo debe responder a un patrón concreto, valida que el contenido es formalmente correcto (p.ej. si es un e-mail, que contenga una arroba y un punto).
Componentes relacionados
Similar a:
- Campo numérico ajustable
- Control deslizante
- Lista de opciones de selección única (radio button)
- Lista de opciones de selección múltiple (checkbox)
- Selector
- Interruptor
Forma parte de:
Recursos asociados al componente
Implementación:
Storybook (solo accesible desde la RCJA)
Control de versiones
| Fecha | Versión | Notas |
|---|---|---|
| 20/03/2026 | 1.3 | Se incluyen definición y pautas de uso |
| 08/10/2023 | 1.2 | Se incluye el campo confidencial |