Form Fields

Certexi's form system supports 53 field types with schema-driven validation and automatic layout. Forms are defined declaratively and rendered dynamically, enabling rapid prototyping of inspection checklists, data entry screens, and configuration panels.

Schema-Driven Forms

Forms are defined using a JSON schema that specifies fields, validation rules, layout, and conditional logic:

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,
    },
  ],
};

Form Field Sandboxes

Live examples using the same primitives that back the schema-driven form system.

Text and textarea

<div className="space-y-4 max-w-sm">
  <div className="space-y-2">
    <Label htmlFor="tu-id">Transport Unit ID</Label>
    <Input id="tu-id" placeholder="TU-2024-00001" />
  </div>
  <div className="space-y-2">
    <Label htmlFor="notes">Notes</Label>
    <Textarea id="notes" placeholder="Inspection observations..." rows={3} />
  </div>
</div>

Number and select

<div className="space-y-4 max-w-sm">
  <div className="space-y-2">
    <Label htmlFor="weight">Weight (kg)</Label>
    <Input id="weight" type="number" placeholder="0.00" />
  </div>
  <div className="space-y-2">
    <Label>Inspection Result</Label>
    <Select>
      <SelectTrigger className="w-full">
        <SelectValue placeholder="Select result" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="pass">Pass</SelectItem>
        <SelectItem value="fail">Fail</SelectItem>
        <SelectItem value="conditional">Conditional</SelectItem>
      </SelectContent>
    </Select>
  </div>
</div>

Full inspection form

<Card className="max-w-md">
  <CardHeader>
    <CardTitle>Inspection entry</CardTitle>
    <CardDescription>Enter transport unit and result</CardDescription>
  </CardHeader>
  <CardContent className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="tid">Transport Unit ID</Label>
      <Input id="tid" placeholder="TU-2024-00001" />
    </div>
    <div className="space-y-2">
      <Label htmlFor="w">Weight (kg)</Label>
      <Input id="w" type="number" placeholder="0.00" />
    </div>
    <div className="space-y-2">
      <Label>Result</Label>
      <Select>
        <SelectTrigger className="w-full">
          <SelectValue placeholder="Select" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="pass">Pass</SelectItem>
          <SelectItem value="fail">Fail</SelectItem>
        </SelectContent>
      </Select>
    </div>
    <div className="space-y-2">
      <Label htmlFor="n">Notes</Label>
      <Textarea id="n" placeholder="Observations..." rows={2} />
    </div>
    <Button className="w-full">Submit inspection</Button>
  </CardContent>
</Card>

Field Types

Text Fields

Number Fields

Selection Fields

Date & Time

Media & File

Specialized

Validation

Built-in Validators

{
  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'
  }
}

Zod Integration

Forms can use Zod schemas for complex validation:

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'),
});

Conditional Validation

Fields can have validation rules that depend on other field values:

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

Conditional Visibility

Show or hide fields based on other values:

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

Layout

Auto Layout

By default, forms render fields in a single column. Use the layout property for multi-column layouts:

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

Responsive

Forms automatically collapse to single-column on mobile viewports.

Related

• Component Overview
• UI Primitives
• Widgets
• Evidence Capture