Overview The FormSchema and FormField types define the structure and configuration of Mantlz forms. These types are returned by the getFormSchema() method and describe all fields, validation rules, and metadata for a form.
interface FormSchema { id : string ; name : string ; title ?: string ; description ?: string ; fields : FormField []; formType ?: FormType ; schema ?: Record < string , any >; }
Properties Unique identifier for the form. Matches the formId used in component props.
Internal name of the form for identification and management.
Display title shown to users at the top of the form.
Descriptive text explaining the form’s purpose, displayed below the title.
Array of field definitions that make up the form. See FormField below. Category of the form, used for specialized behavior and templates. Show Available Form Types
waitlist - Email collection for product launchescontact - General contact/inquiry formsfeedback - User feedback and survey formscustom - Custom form with flexible fieldssurvey - Multi-question survey formsapplication - Job or program applicationsorder - Product order forms with Stripe integrationanalytics-opt-in - Cookie/analytics consent formsrsvp - Event registration forms Validation schema object for form fields. Usually contains Zod validation rules.
interface FormField { id : string ; name : string ; label : string ; type : FieldType ; required ?: boolean ; placeholder ?: string ; options ?: { value : string ; label : string }[]; defaultValue ?: any ; accept ?: string []; maxSize ?: number ; premium ?: boolean ; products ?: Array <{ id : string ; name : string ; description ?: string ; price : number ; currency : string ; image ?: string ; }>; displayMode ?: 'grid' | 'list' ; }
Properties Unique identifier for the field within the form.
Field name used as the key in submitted form data.
Human-readable label displayed above the field.
Type of form field to render. Show Available Field Types
text - Single-line text inputemail - Email input with validationnumber - Numeric inputtextarea - Multi-line text inputselect - Dropdown selection (requires options)checkbox - Checkbox for boolean valuesfile - File upload inputproduct - Product selector for order forms (requires products) Whether the field must be filled before form submission. Defaults to false.
Placeholder text shown in empty input fields.
options
{ value: string; label: string }[]
Array of options for select type fields. Each option has a value (submitted data) and label (display text). Example: [ { "value" : "small" , "label" : "Small" }, { "value" : "medium" , "label" : "Medium" }, { "value" : "large" , "label" : "Large" } ]
Default/pre-filled value for the field. Type depends on the field type:
text, email, textarea: stringnumber: numbercheckbox: booleanselect: string matching an option value For file type fields: array of accepted MIME types or file extensions. Example: ["image/png", "image/jpeg", ".pdf"]
For file type fields: maximum file size in bytes. Example: 5242880 (5MB)
Indicates if this field requires a premium/paid plan to use.
For product type fields: array of available products for order forms with Stripe integration. Show Product Object Structure
{ id : string ; // Stripe product ID name : string ; // Product name description ?: string ; // Product description price : number ; // Price in smallest currency unit (cents) currency : string ; // ISO currency code (e.g., "usd") image ?: string ; // Product image URL }
For product type fields: how to display products.
grid - Card-based grid layoutlist - Vertical list layout Type Aliases FieldType type FieldType = 'text' | 'email' | 'number' | 'textarea' | 'select' | 'checkbox' | 'file' | 'product' ;
type FormType = 'waitlist' | 'contact' | 'feedback' | 'custom' | 'survey' | 'application' | 'order' | 'analytics-opt-in' | 'rsvp' ;
Usage Examples Fetching Form Schema
Dynamic Form Rendering
Type Guards
Example FormSchema Response
import { useEffect , useState } from 'react' ; import { mantlz } from '@mantlz/react' ; import type { FormSchema } from '@mantlz/react' ; function FormInspector () { const [ schema , setSchema ] = useState < FormSchema | null >( null ); useEffect (() => { async function loadSchema () { const formSchema = await mantlz . getFormSchema ( 'your-form-id' ); setSchema ( formSchema ); } loadSchema (); }, []); if ( ! schema ) return < div > Loading... </ div > ; return ( < div > < h1 > { schema . title } </ h1 > < p > { schema . description } </ p > < p > Form has { schema . fields . length } fields </ p > </ div > ); }
Validation Schema The SDK includes Zod schemas for runtime validation:
import { z } from 'zod' ; export const formFieldSchema = z . object ({ id: z . string (), name: z . string (), type: z . string (), required: z . boolean (). optional (), placeholder: z . string (). optional (), label: z . string (), options: z . array ( z . object ({ value: z . string (), label: z . string () }) ). optional (), defaultValue: z . any (). optional (), accept: z . array ( z . string ()). optional (), maxSize: z . number (). optional (), premium: z . boolean (). optional (), products: z . array ( z . object ({ id: z . string (), name: z . string (), description: z . string (). optional (), price: z . number (), currency: z . string (), image: z . string (). optional () }) ). optional (), displayMode: z . enum ([ 'grid' , 'list' ]). optional () }); export const formSchema = z . object ({ id: z . string (), name: z . string (), title: z . string (). optional (), description: z . string (). optional (), fields: z . array ( formFieldSchema ), formType: z . enum ([ 'waitlist' , 'contact' , 'feedback' , 'custom' , 'survey' , 'application' , 'order' , 'analytics-opt-in' , 'rsvp' ]). optional (), schema: z . record ( z . any ()). optional (), });