Resource Detail Form
Generic CRUD form with field types and validation
SaaSForms
Overview
ResourceDetailForm renders a complete form from a schema definition, supporting view, edit, and create modes. It handles field rendering, validation, sections, loading/error states, and unsaved changes warnings out of the box.
Usage
import { ResourceDetailForm } from "@leanicon/web-builder-library/saas";
const schema = {
id: "user",
name: "user",
title: "User Profile",
fields: [
{ name: "name", type: "text", label: "Name", validation: { required: true } },
{ name: "email", type: "email", label: "Email", validation: { required: true } },
],
};
<ResourceDetailForm
schema={schema}
values={{ name: "John", email: "[email protected]" }}
mode="view"
onSave={async (values) => console.log(values)}
onCancel={() => {}}
/>;Variants
View Mode
Edit Mode
Create Mode
Loading
With Error
Error
Failed to load user data. Please try again.
Single Column
No Header
Dark
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
schema | ResourceSchema | — | Yes | Schema defining the form structure |
values | Record<string, unknown> | — | No | Initial/current values for the form |
mode | enum | view | No | Initial form mode |
loading | boolean | false | No | Whether form is in loading state |
error | string | — | No | Error message to display |
locale | string | en-US | No | Locale for formatting (e.g., 'en-US', 'es-ES') |
showHeader | boolean | true | No | Whether to show the form header with title |
className | string | — | No | Custom class name for the form container |
formRef | RefObject<FormActions<T> | null> | — | No | Ref for accessing form actions |
onSave | (values: T) => void | Promise<void> | — | Yes | Called when save is clicked with valid data |
onCancel | () => void | — | Yes | Called when cancel is clicked |
onModeChange | ((mode: FormMode) => void) | — | No | Called when mode changes |
onValidationChange | ((isValid: boolean, errors: Record<string, string>) => void) | — | No | Called when validation state changes |
onChange | ((values: T, fieldName: string) => void) | — | No | Called when any field value changes |
onEdit | (() => void) | — | No | Called when edit button is clicked (view mode) |
onDelete | (() => void) | — | No | Called when delete is requested (if enabled) |
onRetry | (() => void) | — | No | Called when retry is clicked after error |