Schema-based Forms

Schema-based forms in Enforma allow you to define your entire form structure using a JSON schema, enabling dynamic form generation with minimal code. This approach is particularly useful for complex forms, admin interfaces, and applications where form structures need to be defined at runtime.

📔 For a complete working example check out the schema form example

Key Benefits

• Declarative Approach - Define your entire form using simple JSON
• Reduced Boilerplate - Eliminate repetitive component definitions
• Server-driven UIs - Forms can be defined on the server and rendered by the client
• Embedded Validation - Define validation rules directly in the schema alongside field definitions

The Schema Component

Enforma provides a simple EnformaSchema component for rendering schema-based forms. You don't really need to concern with it because it is automatically used if a form receives a schema prop.

This is how you render a schema-based form

<template>
  <Enforma
    :data="formData"
    :validator="validator"
    :schema="formSchema"
    :submit-handler="handleSubmit"
  />
</template>

<script setup>
import { createEncolaValidator } from '@encolajs/enforma/validators/encola'

const validator = createEncolaValidator(formRules)
</script>

TIP

You can also define validation rules directly in the schema at the field level. See Schema-Based Validation for more details.

DEPRECATED

The :rules prop is deprecated in v1.3.0. Use the :validator prop instead. See the Migration Guide for details.

This component can be customized via the configuration

Schema Features

To take advantage of the schema-based forms, you have to learn these concepts:

1. Schema Reference - Full reference for schema structure and options
2. Dynamic Props - Use expressions to create reactive field properties
3. Field Slots - Customize individual fields using slots
4. Transformers - Transform schemas, context, and configuration at runtime
5. Schema-Based Validation - Define validation rules directly in the schema