PxFormLayout

A layout wrapper for form/detail pages. Wraps a form with consistent padding and responsive layout constraints.

Usage

Demo

Create Project

Form content area

<script setup>
import { PxFormLayout, PxHeader, PxStepper } from 'praxis-vue-ui'
</script>

<template>
  <PxFormLayout>
    <PxHeader variant="form" title="Project" :is-edit-mode="isEdit" />

    <form @submit.prevent="save">
      <!-- form fields -->
    </form>

    <PxStepper
      :can-proceed="isValid"
      @next="save"
    />
  </PxFormLayout>
</template>

Slots

Slot	Description
default	Form content — header, fields, and navigation.