Componentes reutilizables

Entrada de datos (inputs)

Agrupación

Grupo de campos anidados (nuevo)
Grupo de campos nivel 1

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

Grupo de campos nivel 1.1
Grupo de campos nivel 1.1.1
Grupo de campos 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
ERROR - Este campo es obligatorio
Advertencia - No se pudo validar el dato
Este es un texto de ayuda
Selectores
Este es un texto de ayuda
Campos combinados
Documento de Identidad:
Incluir dígito verificador
Documento de Identidad:
Incluir dígito verificador
ERROR - Este campo es obligatorio
Fechas

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:
Ejemplo: 31 12 1980
Fecha multicampo (mes con combo):
Ejemplo: 31 marzo 1980
Archivos adjuntos
Formatos aceptados: PDF, JPG y ZIP de hasta 3Mb.
Calendario
Calendario:
Junio 2023
LU
MA
MI
JU
VI
SA
DO
29
30
31
1
2
3
4
5
6
7
8
9
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
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:
Grupo de opciones de etiquetas:
Grupo de opciones de checkboxes:
Grupo de opciones con error:
ERROR - Este campo es obligatorio
Valoración
¿Cómo calificarías esta gestión?:
Grupo de campos solo lectura
Tipos de datos especiales
Campos con indicadores
Dato validado
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.

Formularios apilados

Formulario apilado
ERROR - Este campo es obligatorio
Advertencia - No se pudo validar el dato
Este es un texto de ayuda
Formulario apilado con fieldset oculto
ERROR - Este campo es obligatorio

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
Fila 1 Columna 1 Fila 1 Columna 2 Fila 1 Columna 3 $1.004
Fila 2 Columna 2
ERROR - Este campo es obligatorio
Fila 2 Columna 3
Eliminar 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