DynamicForm

A fully schema-driven form engine. Renders any combination of input types, selects, date pickers, checklists, and file uploads from a FormSchema JSON definition. Powers Praxis's form builder.

Usage

<script setup>
import { ref } from 'vue'
import { DynamicForm } from 'praxis-vue-ui'

const schema = {
  sections: [
    {
      title: 'Personal Info',
      fields: [
        { name: 'first_name', label: 'First Name', type: 'text', required: true },
        { name: 'last_name', label: 'Last Name', type: 'text', required: true },
        { name: 'dob', label: 'Date of Birth', type: 'date' },
      ]
    }
  ]
}

const formData = ref({})
</script>

<template>
  <DynamicForm
    :schema="schema"
    v-model="formData"
    @submit="onSubmit"
  />
</template>

Props

Prop	Type	Default	Description
schemarequired	FormSchema	—	The form schema definition. Describes all sections and fields to render.
modelValue	Record<string, any>	{}	Current form data. Use with v-model.
disabled	boolean	false	Puts the entire form in read-only mode.
loading	boolean	false	Shows loading state on the submit button.

Emits

Event	Payload	Description
update:modelValue	Record<string, any>	Emitted on any field change with the updated form data.
submit	Record<string, any>	Emitted when the form is submitted and valid.

NOTE

DynamicForm is the most complex component in the library. See the schema type definitions in @/types/api/common for the full FormSchema interface.