Preset Blocks

Preset blocks are reusable groups of fields covering common form sections. In the builder, users find them in the Palette and can drag them to the canvas to add an entire container of related fields in one gesture.

Available container presets

ID	Name	Included fields
preset_personal	Personal Details	Name, e-mail, CPF, phone, date of birth
preset_emergency_array	Emergency Contacts (list)	Field-array list of emergency contacts
preset_emergency	Emergency Contact (repeatable)	Repeatable container of contacts
preset_address	Address	ZIP code (with ViaCEP autocomplete), street, number, neighborhood, city, state
preset_health	Health Information	Blood type, allergies, health insurance, conditions, medications

Available step presets

PRESET_STEP_BLOCKS contains complete multi-step flows for event registration:

ID	Description
inscricao_evento	Personal details + address + participation type + payment

Using presets programmatically

import { useBuilder } from "@schema-forms-data/builder";
import {
  PRESET_BLOCKS,
  PRESET_STEP_BLOCKS,
} from "@schema-forms-data/templates";

function ToolbarPresets({ stepId }: { stepId: string }) {
  const { addPresetBlock, addPresetStepBlock } = useBuilder();

  return (
    <div>
      <button
        onClick={() => {
          const preset = PRESET_BLOCKS.find((b) => b.id === "preset_address");
          if (preset) addPresetBlock(preset, stepId);
        }}
      >
        + Address
      </button>

      <button
        onClick={() => {
          const preset = PRESET_STEP_BLOCKS.find(
            (b) => b.id === "inscricao_evento",
          );
          if (preset) addPresetStepBlock(preset);
        }}
      >
        + Registration Flow
      </button>
    </div>
  );
}

Querying presets

import {
  PRESET_BLOCKS,
  PRESET_STEP_BLOCKS,
  getPresetById,
} from "@schema-forms-data/templates";

// List all container preset blocks
console.log(PRESET_BLOCKS);

// List all step preset blocks
console.log(PRESET_STEP_BLOCKS);

// Find by ID
const block = getPresetById("preset_address");

PresetBlock structure

interface PresetBlock {
  id: string;
  name: string;
  description: string;
  icon: string; // Lucide icon name
  category: PresetBlockCategory;
  containerTemplate: Omit<FormContainer, "id" | "ordem">;
}

type PresetBlockCategory =
  | "personal"
  | "address"
  | "health"
  | "event"
  | "payment"
  | "emergency";

PresetStepBlock structure

interface PresetStepBlock {
  id: string;
  name: string;
  description: string;
  icon: string;
  steps: PresetStepTemplate[];
}

Creating a custom preset

Create the PresetBlock object directly and pass it to addPresetBlock:

import type { PresetBlock } from "@schema-forms-data/core";
import { FieldType, generateId } from "@schema-forms-data/core";

const vehiclePreset: PresetBlock = {
  id: "preset_vehicle",
  name: "Vehicle Details",
  description: "License plate, make, model, and year",
  icon: "Car",
  category: "personal",
  containerTemplate: {
    titulo: "Vehicle Details",
    campos: [
      {
        id: generateId(),
        nome: "plate",
        label: "License plate",
        tipo: FieldType.TEXTO,
        obrigatorio: true,
        tamanho: 4,
        ordem: 1,
      },
      {
        id: generateId(),
        nome: "make",
        label: "Make",
        tipo: FieldType.TEXTO,
        obrigatorio: true,
        tamanho: 4,
        ordem: 2,
      },
      {
        id: generateId(),
        nome: "model",
        label: "Model",
        tipo: FieldType.TEXTO,
        obrigatorio: true,
        tamanho: 4,
        ordem: 3,
      },
    ],
  },
};

Disabling presets in the Palette

Pass an exclusion list to BuilderWrapper:

<BuilderWrapper
  disabledPresets={["payment", "health"]}
  schema={schema}
  onSave={handleSave}
>
  <Palette />
</BuilderWrapper>

Using a preset in a plain schema (without the builder)

If you want to include a preset block's fields in a manually written schema:

import { buildPresetContainer } from "@schema-forms-data/templates";

const addressContainer = buildPresetContainer("preset_address");
// Returns a fully populated FormContainer with generated IDs

Presets de container disponíveis

ID	Nome	Campos inclusos
preset_personal	Dados Pessoais	Nome, e-mail, CPF, telefone, data de nascimento
preset_emergency_array	Contatos de Emergência (lista)	Lista (field_array) de contatos de emergência
preset_emergency	Contato de Emergência (repetível)	Container repetível de contatos
preset_address	Endereço	CEP (com autocomplete ViaCEP), logradouro, número, bairro, cidade, estado
preset_health	Informações de Saúde	Tipo sanguíneo, alergias, plano de saúde, condições, medicamentos

Presets de steps disponíveis

PRESET_STEP_BLOCKS contém fluxos completos de múltiplos steps para inscrição em eventos:

ID	Descrição
inscricao_evento	Dados pessoais + endereço + tipo de participação + pagamento

Usar presets programaticamente

import { useBuilder } from "@schema-forms-data/builder";
import {
  PRESET_BLOCKS,
  PRESET_STEP_BLOCKS,
} from "@schema-forms-data/templates";

function ToolbarPresets({ stepId }: { stepId: string }) {
  const { addPresetBlock, addPresetStepBlock } = useBuilder();

  return (
    <div>
      <button
        onClick={() => {
          const preset = PRESET_BLOCKS.find((b) => b.id === "preset_address");
          if (preset) addPresetBlock(preset, stepId);
        }}
      >
        + Endereço
      </button>

      <button
        onClick={() => {
          const preset = PRESET_STEP_BLOCKS.find(
            (b) => b.id === "inscricao_evento",
          );
          if (preset) addPresetStepBlock(preset);
        }}
      >
        + Fluxo de Inscrição
      </button>
    </div>
  );
}

Consultar presets

import {
  PRESET_BLOCKS,
  PRESET_STEP_BLOCKS,
  getPresetById,
} from "@schema-forms-data/templates";

// Listar todos os preset blocks de container
console.log(PRESET_BLOCKS);

// Listar todos os preset blocks de steps
console.log(PRESET_STEP_BLOCKS);

// Buscar por ID
const block = getPresetById("preset_address");

Estrutura de um PresetBlock

interface PresetBlock {
  id: string;
  name: string;
  description: string;
  icon: string; // nome de ícone Lucide
  category: PresetBlockCategory;
  containerTemplate: Omit<FormContainer, "id" | "ordem">;
}

type PresetBlockCategory =
  | "personal"
  | "address"
  | "health"
  | "event"
  | "payment"
  | "emergency";

Estrutura de um PresetStepBlock

interface PresetStepBlock {
  id: string;
  name: string;
  description: string;
  icon: string;
  steps: PresetStepTemplate[];
}

Criar um preset customizado

Crie o objeto PresetBlock diretamente e passe para addPresetBlock:

import type { PresetBlock } from "@schema-forms-data/core";
import { FieldType, generateId } from "@schema-forms-data/core";

const presetVeiculo: PresetBlock = {
  id: "preset_veiculo",
  name: "Dados do Veículo",
  description: "Placa, marca, modelo e ano",
  icon: "Car",
  category: "personal",
  containerTemplate: {
    titulo: "Dados do Veículo",
    campos: [
      {
        id: generateId(),
        nome: "placa",
        label: "Placa",
        tipo: FieldType.TEXTO,
        obrigatorio: true,
        tamanho: 4,
        ordem: 1,
      },
      {
        id: generateId(),
        nome: "marca",
        label: "Marca",
        tipo: FieldType.TEXTO,
        obrigatorio: true,
        tamanho: 4,
        ordem: 2,
      },
      {
        id: generateId(),
        nome: "modelo",
        label: "Modelo",
        tipo: FieldType.TEXTO,
        obrigatorio: true,
        tamanho: 4,
        ordem: 3,
      },
    ],
  },
};

Disabling Presets in the Palette

Pass an exclusion list to BuilderProvider:

<BuilderProvider
  disabledPresets={['payment', 'health']}
  ...
>
  <Palette />
</BuilderProvider>

Using a Preset in a Plain Schema (Without the Builder)

If you want to include a preset block's fields in a manually written schema:

import { buildPresetContainer } from "@schema-forms-data/templates";

const addressContainer = buildPresetContainer("address");
// Returns a fully populated FormContainer with generated IDs