Componentes reutilizables

AGESIC

Entrada de datos (inputs)

Agrupación

Grupo de campos anidados (nuevo)

Campo Padre:

Grupo de campos nivel 1

Se utilizan los fieldset para agrupar campos, por ejemplo por el tipo de información solicitada.

Campo 1 nivel 1:

Campo 2 nivel 1:

Grupo de campos nivel 1.1

Campo 1 nivel 1.1:

Campo 2 nivel 1.1:

Grupo de campos nivel 1.1.1

Campo 1 nivel 1.1.1:

Campo 2 nivel 1.1.1:

Campo 3 nivel 1.1:

Campo 3 nivel 1:

Grupo de campos nivel 2

Campo 1 nivel 2:

+ Agregar otro grupo

Campos

Guía para la creación de formularios digitales: CamposEnlace externo

Evitar el diseño de formularios de más de una columna.

Todos los campos indicados con * son obligatorios

Etiquetas y campos

Etiqueta de campo común:

Etiqueta de campo mediano:

Etiqueta de campo chico:

Etiqueta de campo deshabilitado:

Etiqueta de campo de área de texto:

Etiqueta de campo con error:

ERROR - Este campo es obligatorio

Etiqueta de campo con advertencia:

Advertencia - No se pudo validar el dato

Etiqueta de campo con ayuda:

Este es un texto de ayuda

Etiqueta de campo con placeholder:

Selectores

Etiqueta de combo:

Este es un texto de ayuda

Campos combinados

Documento de Identidad:

Tipo de Documento

Número de Documento

Incluir dígito verificador

Documento de Identidad:

Tipo de Documento con error

Número de Documento

Incluir dígito verificador

ERROR - Este campo es obligatorio

Fechas

Fecha:

Campos para selección de fecha de nacimiento

Guía para la creación de formularios digitales: Campos y calendarios de selección de fechaEnlace externo

Fecha multicampo:

Día

Mes

Año

Ejemplo: 31 12 1980

Fecha multicampo (mes con combo):

Día

Mes

Año

Ejemplo: 31 marzo 1980

Archivos adjuntos

Archivos:

Formatos aceptados: PDF, JPG y ZIP de hasta 3Mb.

Archivos con link:

+ Agregar otro campo

Calendario

Calendario:

Junio 2023

9 de Junio de 2023

Opciones

Guía para la creación de formularios digitales: Combos, checkboxes y radiobuttonsEnlace externo

Grupo de opciones de radio button:

Radio 1 Radio 2 Radio 3 Opción con texto de ayuda Radio 4

Grupo de opciones de etiquetas:

Etiqueta 1 Etiqueta 2 Etiqueta 3

Grupo de opciones de checkboxes:

Checkbox 1 Checkbox 2 Opción con texto de ayuda Checkbox 3

Grupo de opciones con error:

Checkbox 1 con error Checkbox 2 con error

ERROR - Este campo es obligatorio

Valoración

¿Cómo calificarías esta gestión?:

1 estrella 2 estrella 3 estrella 4 estrella 5 estrella

Grupo de campos solo lectura

Nombre completo:

Fecha de Nacimiento:

Tipos de datos especiales

Teléfono (tel):

Correo electrónico (email):

Dirección URL (url):

Campos con indicadores

Con ícono:

Dato validado

Con modal de ayuda:

Link al modal

Botón alineado con los campos

Utilizar esta alineación solamente para formularios muy cortos, como la solicitud de usuario y contraseña, o cuando no son la tarea central dentro de una página.

Alineado:

Otro campo:

Formularios apilados

Formulario apilado

Etiqueta 1:

Etiqueta de combo:

Etiqueta 2:

Etiqueta de campo con error:

ERROR - Este campo es obligatorio

Etiqueta de campo con advertencia:

Advertencia - No se pudo validar el dato

Etiqueta de campo con ayuda:

Este es un texto de ayuda

Formulario apilado con fieldset oculto

Etiqueta 1:

Etiqueta de combo:

Etiqueta de campo con error:

ERROR - Este campo es obligatorio

Etiqueta 2:

Tablas con ingreso de datos

Tabla 1. Tabla con elementos de formulario
Título Columna 1	Título Columna 2	Título Columna 3	Título Columna 4	Título Columna 5
Radio	Fila 1 Columna 1	Fila 1 Columna 2	Fila 1 Columna 3	$1.004
Checkbox	Fila 2 Columna 2	Etiqueta de campo con error en tabla: ERROR - Este campo es obligatorio	Fila 2 Columna 3	Importe:
Eliminar	Etiqueta de combo en tabla:	Fila 3 Columna 3	Fila 3 Columna 4	$ 1.001
Editar	Fila 4 Columna 2	Fila 4 Columna 3	Fila 4 Columna 4	$ 1.001
Total				$86.683