FormBuilder

Code

import { FormBuilder, contactFormDefinition } from "@fadymondy/nasaq/web";import { useState } from "react";export function EditForm() {  const [form, setForm] = useState(contactFormDefinition());  return <FormBuilder value={form} onValueChange={setForm} formKey="pk_live_123" embedBaseUrl="https://forms.example.com" onSave={(f) => fetch("/api/forms/1", { method: "PUT", body: JSON.stringify(f) })} />;}

Form Builders · beta

Live examples and controls: FormBuilder in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/form-builder.json

The admin side of public forms. It edits a plain FormDefinition (stored by you) and shows a live PublicForm preview beside it.

• Fields: add eight kinds, edit labels in English and Arabic, mark required, write options (Riyadh | الرياض), reorder with the arrows or the row menu.
• Logic: rules built with RuleBuilder that show, hide or require a field from other answers.
• Settings: the sites allowed to embed the form, a tester for an address, thank-you messages in both languages, the honeypot.
• Embed: an iframe or script snippet and the public link, each with a copy button.

The allowed sites list is closed by default: with nothing in it no site can embed the form, and the builder says so.

When to useCopy Anchor Link

• A CMS or admin that lets editors create contact, inquiry or subscribe forms for public sites.

When not to useCopy Anchor Link

• Forms your developers write in code: use Field and friends.
• Complex multi-step flows: use a wizard.

ImportCopy Anchor Link

import { FormBuilder } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { FormBuilder, contactFormDefinition } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function EditForm() {
  const [form, setForm] = useState(contactFormDefinition());
  return <FormBuilder value={form} onValueChange={setForm} formKey="pk_live_123" embedBaseUrl="https://forms.example.com" onSave={(f) => fetch("/api/forms/1", { method: "PUT", body: JSON.stringify(f) })} />;
}

AnatomyCopy Anchor Link

FormBuilder                data-slot="form-builder"
├─ header                  name, "Accepting responses" switch, Save
└─ Tabs
   ├─ Fields               list (data-slot="form-builder-field", context menu), settings card, live preview
   ├─ Logic                one RuleBuilder card per rule
   ├─ Settings             allowed sites (TagInput), address tester, thank-you (en, ar), honeypot
   └─ Embed                iframe or script CodeBlock, public link + CopyButton

APICopy Anchor Link

The definition, helpers and validators are documented in PublicForm.

ExamplesCopy Anchor Link

Save through your APICopy Anchor Link

import { FormBuilder, type FormDefinition } from "@fadymondy/nasaq/web";

export const Editor = ({ form, save }: { form: FormDefinition; save: (f: FormDefinition) => Promise<void> }) => <FormBuilder defaultValue={form} onSave={save} />;

AccessibilityCopy Anchor Link

• Tabs use arrow keys. The field list is a list of buttons; the current one has aria-current. Each row also opens a menu (move, duplicate, remove) on context-click, long-press, Shift+F10 or the Menu key.
• Every reorder and delete has a labelled button as well as the menu.
• The preview is a complementary region named "Live preview".

RTL & i18nCopy Anchor Link

• Labels for the builder itself come in Arabic and English. Arabic label and thank-you inputs are right to left. The origins input and snippets are left to right.
• Removing a field also removes rules that pointed at it.

Styling & tokensCopy Anchor Link

Cards, tabs and inputs use the standard tokens. The Fields tab is two columns from lg, one below.

Do / Don'tCopy Anchor Link

• Do validate submissions and the request origin on the server with the helpers from public-form.
• Do leave the honeypot on.
• Don't put a wildcard on a whole public suffix (https://*.com is refused).

RelatedCopy Anchor Link

• PublicForm · RuleBuilder · TagInput

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-form-builders-form-builder--docs