Examples

Annotated, copy-paste examples covering the most common patterns. Toggle between Code and Preview on each example.

Contact Form

A realistic contact form with display fields (heading, separator), validation, and a checkbox. Display fields are excluded from the submitted data.

Contact Us
Fill out the form and we'll get back to you.

Personal Information

Fill out the form and we'll get back to you.

Conditional Fields

A field with a condition is hidden until the condition passes. Here, "Other details" only appears when the topic select is set to "other".

Select Other from the Topic dropdown to reveal the extra field.

Support Ticket

Multi-locale Form

Provide a locale map for every label, then switch the active locale at runtime. The baseLocale is used as a fallback when a translation is missing.

Locale:
Registration

Custom Validation

Register a validator once at app startup. Reference it by key in any field's validation.customRule. The validator receives the field's value and the full form data object.

Work Sign-up
Must be a valid email format.
Lowercase letters, numbers, and underscores only. 3–20 characters.
Must be between 18 and 120.
50–300 characters.

Controlled FormBuilder

Wire FormBuilder's onChange into a FormRenderer for a live side-by-side preview. The builder is always the source of truth; the renderer is a read-only consumer.

Input

Text
Number
Email
Phone
Select
Checkbox
Radio
Date
Text Area
File

Display

Heading
Paragraph
Separator
Drag fields from the palette to start building your form

Select a field to edit its properties

Form

en-US
en-US
en-US

Live Preview

Add fields in the builder above to see the preview.