MR Labs

Examples

Real-world field configurations for common form patterns.

Required email field

{
  "field_type": "email",
  "label": "Email Address",
  "data": {
    "required": true,
    "validation": { "customMessage": "Enter a valid email" },
    "config": { "variant": "boxed", "icon": "mail", "size": "md" }
  }
}

Select field with options

{
  "field_type": "select",
  "label": "Country",
  "data": {
    "required": true,
    "options": [
      { "label": "Cambodia", "value": "kh" },
      { "label": "United States", "value": "us" }
    ],
    "config": { "variant": "boxed" }
  }
}

Text field with prefix validation

{
  "field_type": "text",
  "label": "Username",
  "data": {
    "required": true,
    "validation": {
      "prefix": "@",
      "min": 3,
      "max": 20,
      "customMessage": "Must start with @ and be 3-20 characters"
    },
    "config": { "variant": "floating", "icon": "user" }
  }
}

Date field with date range restriction

{
  "field_type": "date",
  "label": "Event Date",
  "data": {
    "required": true,
    "validation": {
      "minDate": "2026-01-01",
      "maxDate": "2026-12-31",
      "disabledDates": ["2026-12-25"],
      "customMessage": "Pick a date in 2026 (excluding Christmas)"
    },
    "config": { "icon": "calendar" }
  }
}

File upload with type restriction

{
  "field_type": "file",
  "label": "Resume (PDF only)",
  "data": {
    "required": true,
    "validation": {
      "allowedMimeTypes": ["application/pdf"],
      "customMessage": "Only PDF files are accepted"
    },
    "config": { "maxFileSize": 5242880 }
  }
}

Radio with card display mode

{
  "field_type": "radio",
  "label": "Plan",
  "data": {
    "required": true,
    "options": [
      { "label": "Free", "value": "free", "description": "Up to 100 submissions" },
      { "label": "Pro", "value": "pro", "description": "Up to 10,000 submissions" },
      { "label": "Enterprise", "value": "ent", "description": "Unlimited" }
    ],
    "config": { "displayMode": "cards", "columns": 3 }
  }
}

Checkbox with min/max selections

{
  "field_type": "checkbox",
  "label": "Select up to 3 interests",
  "data": {
    "required": true,
    "options": [
      { "label": "Technology", "value": "tech" },
      { "label": "Sports", "value": "sports" },
      { "label": "Music", "value": "music" },
      { "label": "Travel", "value": "travel" }
    ],
    "validation": {
      "min": 1,
      "max": 3,
      "customMessage": "Select 1 to 3 interests"
    },
    "config": { "displayMode": "grid", "columns": 2 }
  }
}

Info callout

{
  "field_type": "info",
  "label": "Important Notice",
  "data": {
    "description": "Please fill out all required fields before submitting.",
    "config": { "infoStyle": "callout", "calloutType": "warning" }
  }
}

Full form creation sequence

A complete workflow to create a contact form with 3 fields:

// 1. Create the form
create_form({
  org_slug: "my-org",
  title: "Contact Us",
  description: "Get in touch with our team",
  visibility: "public",
  access_mode: "anonymous"
})
// Returns: { id: "abc-123", slug: "contact-us", public_url: "..." }

// 2. Get the default section ID
get_form_structure({ form_id: "abc-123" })
// Returns: [{ id: 1, sections: [{ id: 1, fields: [] }] }]

// 3. Add fields
add_field({ form_id: "abc-123", section_id: 1, field_type: "text", label: "Name", data: { required: true, config: { variant: "boxed", icon: "user" } } })
add_field({ form_id: "abc-123", section_id: 1, field_type: "email", label: "Email", data: { required: true, config: { variant: "boxed", icon: "mail" } } })
add_field({ form_id: "abc-123", section_id: 1, field_type: "textarea", label: "Message", data: { required: true, config: { variant: "boxed" } } })

// 4. Publish
update_form({ form_id: "abc-123", status: "published" })
PreviousValidation & ConfigNextLive Demo