Campos de Formulario

El sistema de formularios de Certexi soporta 53 tipos de campo con validacion dirigida por esquemas y layout automatico. Los formularios se definen declarativamente y se renderizan dinamicamente, permitiendo el prototipado rapido de listas de inspeccion, pantallas de captura de datos y paneles de configuracion.

Formularios Dirigidos por Esquema

Los formularios se definen usando un esquema JSON que especifica campos, reglas de validacion, layout y logica condicional:

const formSchema = {
  fields: [
    {
      name: 'transportUnitId',
      type: 'text',
      label: 'Transport Unit ID',
      required: true,
      pattern: '^TU-\\d{4}-\\d{5}$',
      placeholder: 'TU-2024-00001',
    },
    {
      name: 'weight',
      type: 'number',
      label: 'Weight (kg)',
      min: 0,
      max: 100000,
      step: 0.1,
      required: true,
    },
    {
      name: 'inspectionResult',
      type: 'select',
      label: 'Inspection Result',
      options: ['Pass', 'Fail', 'Conditional'],
      required: true,
    },
  ],
};

Sandboxes de Campos de Formulario

Ejemplos en vivo usando las mismas primitivas que respaldan el sistema de formularios dirigido por esquemas.

Texto y textarea

<div className="space-y-4 max-w-sm">
  <div className="space-y-2">
    <Label htmlFor="tu-id">ID de Unidad de Transporte</Label>
    <Input id="tu-id" placeholder="TU-2024-00001" />
  </div>
  <div className="space-y-2">
    <Label htmlFor="notes">Notas</Label>
    <Textarea id="notes" placeholder="Observaciones de inspeccion..." rows={3} />
  </div>
</div>

Numero y select

<div className="space-y-4 max-w-sm">
  <div className="space-y-2">
    <Label htmlFor="weight">Peso (kg)</Label>
    <Input id="weight" type="number" placeholder="0.00" />
  </div>
  <div className="space-y-2">
    <Label>Resultado de Inspeccion</Label>
    <Select>
      <SelectTrigger className="w-full">
        <SelectValue placeholder="Seleccionar resultado" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="pass">Aprobado</SelectItem>
        <SelectItem value="fail">Rechazado</SelectItem>
        <SelectItem value="conditional">Condicional</SelectItem>
      </SelectContent>
    </Select>
  </div>
</div>

Formulario de inspeccion completo

<Card className="max-w-md">
  <CardHeader>
    <CardTitle>Entrada de inspeccion</CardTitle>
    <CardDescription>Ingrese unidad de transporte y resultado</CardDescription>
  </CardHeader>
  <CardContent className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="tid">ID de Unidad de Transporte</Label>
      <Input id="tid" placeholder="TU-2024-00001" />
    </div>
    <div className="space-y-2">
      <Label htmlFor="w">Peso (kg)</Label>
      <Input id="w" type="number" placeholder="0.00" />
    </div>
    <div className="space-y-2">
      <Label>Resultado</Label>
      <Select>
        <SelectTrigger className="w-full">
          <SelectValue placeholder="Seleccionar" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="pass">Aprobado</SelectItem>
          <SelectItem value="fail">Rechazado</SelectItem>
        </SelectContent>
      </Select>
    </div>
    <div className="space-y-2">
      <Label htmlFor="n">Notas</Label>
      <Textarea id="n" placeholder="Observaciones..." rows={2} />
    </div>
    <Button className="w-full">Enviar inspeccion</Button>
  </CardContent>
</Card>

Tipos de Campo

Campos de Texto

Campos Numericos

Campos de Seleccion

Fecha y Hora

Multimedia y Archivos

Especializados

Validacion

Validadores Integrados

{
  name: 'email',
  type: 'email',
  required: true,
  validation: {
    pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
    message: 'Please enter a valid email address'
  }
}

Integracion con Zod

Los formularios pueden usar esquemas Zod para validacion compleja:

import { z } from 'zod';

const schema = z.object({
  weight: z.number().min(0).max(100000),
  transportUnitId: z.string().regex(/^TU-\d{4}-\d{5}$/),
  photos: z.array(z.string().url()).min(1, 'At least one photo required'),
});

Validacion Condicional

Los campos pueden tener reglas de validacion que dependen de los valores de otros campos:

{
  name: 'rejectionReason',
  type: 'textarea',
  label: 'Rejection Reason',
  required: false,
  conditionalRequired: {
    field: 'inspectionResult',
    value: 'Fail'
  }
}

Visibilidad Condicional

Mostrar u ocultar campos basandose en otros valores:

{
  name: 'hazmatDetails',
  type: 'textarea',
  label: 'Hazmat Classification',
  visible: {
    field: 'containsHazmat',
    value: true
  }
}

Layout

Layout Automatico

Por defecto, los formularios renderizan campos en una sola columna. Use la propiedad layout para layouts multi-columna:

{
  layout: {
    columns: 2,
    gaps: { row: '1rem', column: '1.5rem' },
    sections: [
      { title: 'Transport Unit', fields: ['id', 'type', 'weight'] },
      { title: 'Inspection', fields: ['result', 'photos', 'notes'] }
    ]
  }
}

Responsivo

Los formularios se colapsan automaticamente a una sola columna en viewports moviles.

Relacionado

• Vision General de Componentes
• Primitivas de UI
• Widgets
• Captura de Evidencia