FormBuilderCanvas
v1.0.11Updated 27 Aug 2026Drag-and-drop form-builder canvas (dnd-kit). Used inside the form designer to compose a public form from a palette of field types.
Preview
Live · 10 storiesDefaultOpen ↗
▸Why this is recommendeddesignerbuilderformdnd+2
The default, out-of-the-box FormBuilderCanvas.
Recommended for+14
- ✓Form designer pages
- ✓Workflow form-step editor
Tags+6
designerbuilderformdndno-codedefault
Features+4
- Drop zone with placeholder hints
- Reorder existing fields
- Per-field selected state + side panel
- Field-type palette (text, email, number, select, checkbox, file, …)
- Section dividers
- Empty canvas state
- i18n: labels prop overrides every built-in string (toolbar, palette, config panels, aria-labels); visible counts format through LocaleProvider
Not recommended for−2
- ✕Rendering the finished form (just render FormField + FormSection)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
fieldsCurrent field list
yesonChangeField list change callback
—labelsOverride any built-in UI string — toolbar, palette, canvas hints, bulk bar, properties/logic panels, aria-labels (i18n). Merged over DEFAULT_FORM_BUILDER_CANVAS_LABELS; {label}/{number} templates for parameterized strings.
—