Form Blocks

Professional form layouts for various use cases. All forms are accessible and include proper validation.

Contact Form

Simple contact form with name, email, and message fields.

Settings Form

User settings panel with various input types.

Newsletter Signup

Simple newsletter subscription form.

Payment Form

Payment details form with card information.

Usage

Customize form blocks for your application:

Add Validation

The blocks on this page are built from plain input nodes, and an input declares its own validation keys — required, pattern, maxLength, min, max and step — which the renderer forwards to the native HTML input attributes:

{
  "type": "input",
  "name": "email",
  "inputType": "email",
  "required": true,
  "pattern": "^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$"
}

inputType: "email" already gets the browser's own email check; pattern tightens it. The browser enforces these constraints when the input is submitted inside a <form>.

An input node has no validation key. Rule objects with custom messages belong to the form component, whose fields[] entries carry them. Every rule there is a { value, message } object, and validation.required supplies the message only — whether the field is required is decided by required on the field itself:

{
  "type": "form",
  "fields": [
    {
      "name": "message",
      "type": "textarea",
      "label": "How can we help?",
      "required": true,
      "validation": {
        "required": "Please tell us how we can help",
        "minLength": { "value": 20, "message": "Please use at least 20 characters" },
        "maxLength": { "value": 2000, "message": "Please keep it under 2000 characters" }
      }
    }
  ]
}

pattern is the one rule that route cannot take from JSON: react-hook-form runs it only when the rule's value is a compiled RegExp, and no JSON document can hold one. Declare the pattern on the object field's metadata instead (pattern, a string, which @object-ui/fields compiles before the rule reaches the form), or in a TypeScript-authored schema pass the real thing — pattern: { value: /.../, message: '...' }. The full rule table is in the Form Plugin reference.

Add Submit Action

{
  "type": "button",
  "label": "Submit",
  "action": {
    "type": "submit",
    "endpoint": "/api/contact",
    "method": "POST"
  }
}

Customize Layout

{
  "type": "div",
  "className": "grid grid-cols-1 md:grid-cols-2 gap-6"
}

Next Steps

• Browse Marketing Blocks
• Explore E-commerce Blocks
• Learn about Form Validation