> ## Documentation Index
> Fetch the complete documentation index at: https://docs.laburen.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tipos de Campos de Formulario

> Guía completa de los tipos de campos disponibles para formularios en Laburen

# Tipos de Campos de Formulario

Laburen ofrece una amplia variedad de tipos de campos para crear formularios personalizados que se adapten a tus necesidades. Esta guía detalla todos los tipos de campos disponibles, sus opciones de configuración y ejemplos de uso.

## Campos de Texto

### Texto Simple

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-text.png" alt="Campo de Texto Simple" />

El campo de texto simple permite a los usuarios ingresar texto en una sola línea.

**Opciones de configuración:**

* **Etiqueta**: Texto que aparece encima del campo
* **Placeholder**: Texto de ejemplo que aparece dentro del campo
* **Valor predeterminado**: Texto que aparece pre-rellenado
* **Requerido**: Si el campo debe ser completado obligatoriamente
* **Validación**: Reglas como longitud mínima/máxima
* **Ayuda**: Texto explicativo que aparece debajo del campo

**Ejemplo de uso:**

```json theme={null}
{
  "type": "text",
  "id": "nombre",
  "label": "Nombre",
  "placeholder": "Ej. Juan Pérez",
  "defaultValue": "",
  "required": true,
  "validation": {
    "minLength": 2,
    "maxLength": 50
  },
  "helpText": "Ingresa tu nombre completo"
}
```

### Área de Texto

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-textarea.png" alt="Campo de Área de Texto" />

Permite a los usuarios ingresar texto en múltiples líneas, ideal para comentarios o descripciones.

**Opciones de configuración:**

* Todas las opciones del campo de texto simple
* **Filas**: Número de filas visibles
* **Redimensionable**: Si el usuario puede cambiar el tamaño del área

**Ejemplo de uso:**

```json theme={null}
{
  "type": "textarea",
  "id": "comentarios",
  "label": "Comentarios",
  "placeholder": "Escribe tus comentarios aquí...",
  "rows": 4,
  "resizable": true,
  "required": false
}
```

## Campos de Contacto

### Email

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-email.png" alt="Campo de Email" />

Campo especializado para direcciones de correo electrónico con validación automática.

**Opciones de configuración:**

* Opciones estándar de texto
* **Validación de formato**: Verifica automáticamente que sea un email válido

**Ejemplo de uso:**

```json theme={null}
{
  "type": "email",
  "id": "email",
  "label": "Correo Electrónico",
  "placeholder": "tu@ejemplo.com",
  "required": true
}
```

### Teléfono

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-phone.png" alt="Campo de Teléfono" />

Campo para números telefónicos con formato y validación internacional.

**Opciones de configuración:**

* Opciones estándar de texto
* **Selector de país**: Permite seleccionar el código de país
* **Formato**: Aplica formato automático según el país seleccionado

**Ejemplo de uso:**

```json theme={null}
{
  "type": "phone",
  "id": "telefono",
  "label": "Número de Teléfono",
  "defaultCountry": "ES",
  "required": true
}
```

## Campos de Selección

### Selección Única (Dropdown)

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-select.png" alt="Campo de Selección" />

Permite al usuario seleccionar una opción de una lista desplegable.

**Opciones de configuración:**

* **Etiqueta**: Texto descriptivo del campo
* **Opciones**: Lista de valores y etiquetas para mostrar
* **Valor predeterminado**: Opción preseleccionada
* **Placeholder**: Texto que se muestra cuando no hay selección
* **Requerido**: Si es obligatorio seleccionar una opción

**Ejemplo de uso:**

```json theme={null}
{
  "type": "select",
  "id": "pais",
  "label": "País",
  "placeholder": "Selecciona tu país",
  "options": [
    { "value": "es", "label": "España" },
    { "value": "mx", "label": "México" },
    { "value": "ar", "label": "Argentina" },
    { "value": "co", "label": "Colombia" }
  ],
  "defaultValue": "es",
  "required": true
}
```

### Botones de Radio

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-radio.png" alt="Botones de Radio" />

Muestra opciones como botones de radio para selección única.

**Opciones de configuración:**

* Similar al campo de selección
* **Disposición**: Vertical u horizontal

**Ejemplo de uso:**

```json theme={null}
{
  "type": "radio",
  "id": "genero",
  "label": "Género",
  "options": [
    { "value": "masculino", "label": "Masculino" },
    { "value": "femenino", "label": "Femenino" },
    { "value": "otro", "label": "Otro" },
    { "value": "prefiero_no_decir", "label": "Prefiero no decir" }
  ],
  "layout": "horizontal",
  "required": true
}
```

### Casillas de Verificación

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-checkbox.png" alt="Casillas de Verificación" />

Permite seleccionar múltiples opciones mediante casillas de verificación.

**Opciones de configuración:**

* Similar a los botones de radio
* Permite selección múltiple

**Ejemplo de uso:**

```json theme={null}
{
  "type": "checkbox",
  "id": "intereses",
  "label": "Intereses",
  "options": [
    { "value": "tecnologia", "label": "Tecnología" },
    { "value": "marketing", "label": "Marketing" },
    { "value": "ventas", "label": "Ventas" },
    { "value": "finanzas", "label": "Finanzas" }
  ],
  "layout": "vertical",
  "required": false
}
```

### Interruptor (Toggle)

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-toggle.png" alt="Interruptor" />

Campo para opciones booleanas (sí/no) en formato de interruptor.

**Opciones de configuración:**

* **Etiqueta**: Texto descriptivo
* **Valor predeterminado**: Activado o desactivado

**Ejemplo de uso:**

```json theme={null}
{
  "type": "toggle",
  "id": "suscripcion",
  "label": "Suscribirme al boletín",
  "defaultValue": true
}
```

## Campos Numéricos y de Fecha

### Número

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-number.png" alt="Campo Numérico" />

Campo especializado para valores numéricos.

**Opciones de configuración:**

* **Mínimo/Máximo**: Rango de valores permitidos
* **Paso**: Incremento para los botones de aumento/disminución
* **Prefijo/Sufijo**: Símbolos como € o %

**Ejemplo de uso:**

```json theme={null}
{
  "type": "number",
  "id": "edad",
  "label": "Edad",
  "min": 18,
  "max": 120,
  "step": 1,
  "required": true
}
```

### Fecha

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-date.png" alt="Selector de Fecha" />

Permite seleccionar una fecha mediante un calendario.

**Opciones de configuración:**

* **Formato**: Cómo se muestra la fecha (DD/MM/YYYY, etc.)
* **Fecha mínima/máxima**: Rango de fechas permitidas
* **Fecha predeterminada**: Fecha preseleccionada

**Ejemplo de uso:**

```json theme={null}
{
  "type": "date",
  "id": "fecha_nacimiento",
  "label": "Fecha de Nacimiento",
  "format": "DD/MM/YYYY",
  "minDate": "1900-01-01",
  "maxDate": "2005-12-31",
  "required": true
}
```

### Hora

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-time.png" alt="Selector de Hora" />

Permite seleccionar una hora específica.

**Opciones de configuración:**

* **Formato**: 12h o 24h
* **Intervalo**: Incrementos de minutos (5, 10, 15, etc.)

**Ejemplo de uso:**

```json theme={null}
{
  "type": "time",
  "id": "hora_cita",
  "label": "Hora de la Cita",
  "format": "24h",
  "interval": 15,
  "required": true
}
```

## Campos Especiales

### Carga de Archivos

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-file.png" alt="Carga de Archivos" />

Permite a los usuarios subir archivos.

**Opciones de configuración:**

* **Tipos de archivo**: Extensiones permitidas
* **Tamaño máximo**: Límite en MB
* **Múltiples archivos**: Si se permite subir varios archivos

**Ejemplo de uso:**

```json theme={null}
{
  "type": "file",
  "id": "curriculum",
  "label": "Curriculum Vitae",
  "acceptedTypes": [".pdf", ".doc", ".docx"],
  "maxSize": 5,
  "multiple": false,
  "required": true
}
```

### Valoración (Rating)

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-rating.png" alt="Valoración" />

Campo para calificaciones mediante estrellas u otros símbolos.

**Opciones de configuración:**

* **Escala**: Número máximo de estrellas (1-10)
* **Símbolo**: Estrellas, corazones, etc.

**Ejemplo de uso:**

```json theme={null}
{
  "type": "rating",
  "id": "satisfaccion",
  "label": "Nivel de Satisfacción",
  "scale": 5,
  "symbol": "star",
  "required": true
}
```

### Firma

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-signature.png" alt="Campo de Firma" />

Permite a los usuarios dibujar su firma.

**Opciones de configuración:**

* **Ancho/Alto**: Dimensiones del área de firma
* **Color**: Color del trazo

**Ejemplo de uso:**

```json theme={null}
{
  "type": "signature",
  "id": "firma",
  "label": "Firma",
  "width": 400,
  "height": 200,
  "strokeColor": "#000000",
  "required": true
}
```

## Elementos de Estructura

### Título

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-heading.png" alt="Título" />

Añade un título o encabezado para organizar secciones del formulario.

**Opciones de configuración:**

* **Texto**: Contenido del título
* **Nivel**: H1, H2, H3, etc.

**Ejemplo de uso:**

```json theme={null}
{
  "type": "heading",
  "text": "Información Personal",
  "level": 2
}
```

### Texto Informativo

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-text-block.png" alt="Bloque de Texto" />

Añade bloques de texto explicativo entre campos.

**Opciones de configuración:**

* **Contenido**: Texto a mostrar (admite Markdown)

**Ejemplo de uso:**

```json theme={null}
{
  "type": "text_block",
  "content": "Por favor, completa todos los campos obligatorios marcados con *. Tu información será tratada de acuerdo con nuestra [política de privacidad](/privacidad)."
}
```

### Separador

<img src="https://mintlify.s3.us-west-1.amazonaws.com/chatsappaicom/images/field-divider.png" alt="Separador" />

Añade una línea divisoria entre secciones.

**Opciones de configuración:**

* **Estilo**: Sólido, punteado, etc.
* **Color**: Color de la línea
* **Grosor**: Espesor de la línea

**Ejemplo de uso:**

```json theme={null}
{
  "type": "divider",
  "style": "solid",
  "color": "#EEEEEE",
  "thickness": 2
}
```

## Lógica Condicional

Puedes configurar la visibilidad de los campos basándote en las respuestas a otros campos. Esto te permite crear formularios dinámicos que se adaptan a las respuestas del usuario.

### Ejemplo de Lógica Condicional

```json theme={null}
{
  "type": "text",
  "id": "otra_empresa",
  "label": "¿Cuál es el nombre de tu empresa?",
  "required": true,
  "conditional": {
    "field": "empresa",
    "operator": "equals",
    "value": "otra"
  }
}
```

En este ejemplo, el campo "otra\_empresa" solo se mostrará si el usuario selecciona "Otra" en un campo de selección llamado "empresa".

### Operadores Disponibles

* **equals**: El valor es exactamente igual
* **not\_equals**: El valor es diferente
* **contains**: El valor contiene el texto especificado
* **not\_contains**: El valor no contiene el texto especificado
* **greater\_than**: El valor es mayor que el especificado
* **less\_than**: El valor es menor que el especificado
* **is\_empty**: El campo está vacío
* **is\_not\_empty**: El campo no está vacío

## Mejores Prácticas

Para crear formularios efectivos:

1. **Mantén la simplicidad**: Usa solo los campos necesarios
2. **Agrupa campos relacionados**: Organiza el formulario en secciones lógicas
3. **Usa etiquetas claras**: Las etiquetas deben describir exactamente qué información se solicita
4. **Proporciona ayuda contextual**: Usa textos de ayuda para campos complejos
5. **Valida los datos**: Configura reglas de validación apropiadas
6. **Usa lógica condicional**: Muestra solo los campos relevantes según las respuestas anteriores
7. **Prueba en diferentes dispositivos**: Asegúrate de que el formulario funcione bien en móviles y tablets

<Note>
  Para obtener ayuda adicional con la configuración de campos, contacta a nuestro equipo de soporte en [support@laburen.com](mailto:support@laburen.com).
</Note>