FormLayout

organisms

Form scaffold — title + description + sections (each with heading + fields) + footer (save/cancel). Used on every admin create/edit page.

ARIA Role: form

Demo

Demo for FormLayout (organisms)

Form scaffold — title + description + sections (each with heading + fields) + footer (save/cancel). Used on every admin create/edit page.

Props

Prop	Type	Required	Default	Description
`title`	`string`	Yes	`—`
`sections`	`FormSection[]`	Yes	`—`	1-6 sections
`onSubmit`	`() => void`	Yes	`—`

TypeScript Interface

interface FormLayoutProps {
  title: string;
  description?: string;
  sections: { id: string; title: string; description?: string; fields: React.ReactNode }[];
  onSubmit: () => void;
  onCancel?: () => void;
  submitLabel?: string;
  cancelLabel?: string;
  isSubmitting?: boolean;
  error?: string;
}

Assertions (NASA Rule 5)

[type]sections bounded 1-6 (NASA Rule 2)(NASA Rule 2)
[aria]<form aria-labelledby=titleId>; error summary has role='alert'(WCAG 3.3.1, 3.3.3)

Usage

Import

import { Formlayout } from '@epasslive/design-system'

Basic

<Formlayout />

With Variants

<Formlayout variant="primary" size="md" />