{
  "name": "plan-selection-form",
  "kind": "block",
  "primary": "form",
  "page": "/apps/user-flow/app/registration/plan/plan.contents.html",
  "slots": [],
  "nested": [
    "reg-step-header",
    "commerce-pricing-tiers",
    "reg-step-footer",
    "reg-step-progress"
  ],
  "attrs": {
    "data-reg-input": "",
    "action": "/site/examples/registration/billing",
    "method": "get"
  },
  "html": "<form data-reg-input action=\"/site/examples/registration/billing\" method=\"get\">\n        <header data-reg-heading><!-- nested: reg-step-header --></header>\n\n        <section data-reg-form\n  role=\"radiogroup\" aria-label=\"Plan\"><!-- nested: commerce-pricing-tiers --></section>\n\n        <footer><!-- nested: reg-step-footer --></footer>\n      </form>",
  "source": "apps/user-flow/app/registration/plan/plan.contents.html",
  "metadata": {
    "domain": "forms",
    "description": "Complete plan-selection form — heading, a vertical radio group of option-cards (free / pro / team / enterprise / custom) each showing price and feature summary, with a free-text requirements textarea revealed on the custom option, and a submit footer. The full pricing-choice form composition with header and footer. Use for 'plan selection form', 'pricing form', 'choose a plan form', 'subscription tier picker'.",
    "keywords": [
      "plan",
      "selection",
      "form",
      "pricing",
      "tiers",
      "subscription",
      "free",
      "pro",
      "team",
      "enterprise",
      "custom",
      "option-card",
      "radiogroup",
      "choose",
      "price",
      "features",
      "textarea",
      "complete",
      "card",
      "heading",
      "footer",
      "submit",
      "continue",
      "full-form"
    ],
    "related": [
      "commerce-pricing-tiers",
      "pricing-tiers",
      "reg-step-footer"
    ],
    "tags": {
      "complexity": "moderate",
      "form": "selection"
    }
  },
  "captured_at": "2026-06-10T14:28:57.979Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "display",
      "textContent": "Choose a plan"
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "subtle",
      "textContent": "Start with a 14-day Pro trial. Drop to Free at any time."
    },
    {
      "id": "header-2",
      "component": "Header",
      "data-reg-heading": "",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "data-reg-heading": "",
      "children": [
        "header-2"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "body",
      "textContent": "Free"
    },
    {
      "id": "text-4",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Solo or community work"
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "body",
      "textContent": "$0/mo"
    },
    {
      "id": "row",
      "component": "Row",
      "slot": "heading",
      "align": "baseline",
      "gap": "2",
      "children": [
        "text-3",
        "text-4",
        "text-5"
      ]
    },
    {
      "id": "text-6",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "Up to 5 members · 10 projects · community support"
    },
    {
      "id": "option-card",
      "component": "OptionCard",
      "name": "plan",
      "value": "free",
      "children": [
        "row",
        "text-6"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "variant": "body",
      "textContent": "Pro"
    },
    {
      "id": "text-8",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Designed for small operations"
    },
    {
      "id": "text-9",
      "component": "Text",
      "variant": "body",
      "textContent": "$49/mo"
    },
    {
      "id": "row-2",
      "component": "Row",
      "slot": "heading",
      "align": "baseline",
      "gap": "2",
      "children": [
        "text-7",
        "text-8",
        "text-9"
      ]
    },
    {
      "id": "text-10",
      "component": "Text",
      "variant": "body",
      "textContent": "Unlimited members · advanced charts · 100 GB storage · email support"
    },
    {
      "id": "badge",
      "component": "Badge",
      "text": "Saves 40%",
      "variant": "success"
    },
    {
      "id": "text-11",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "14-day trial period"
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge",
        "text-11"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "slot": "description",
      "gap": "2",
      "children": [
        "text-10",
        "row-3"
      ]
    },
    {
      "id": "option-card-2",
      "component": "OptionCard",
      "checked": true,
      "name": "plan",
      "value": "pro",
      "children": [
        "row-2",
        "column-2"
      ]
    },
    {
      "id": "text-12",
      "component": "Text",
      "variant": "body",
      "textContent": "Team"
    },
    {
      "id": "text-13",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "For growing organizations"
    },
    {
      "id": "text-14",
      "component": "Text",
      "variant": "body",
      "textContent": "$129/mo"
    },
    {
      "id": "row-4",
      "component": "Row",
      "slot": "heading",
      "align": "baseline",
      "gap": "2",
      "children": [
        "text-12",
        "text-13",
        "text-14"
      ]
    },
    {
      "id": "text-15",
      "component": "Text",
      "variant": "body",
      "textContent": "Everything in Pro · SSO · audit log · role-based permissions · 1 TB storage"
    },
    {
      "id": "badge-2",
      "component": "Badge",
      "text": "Saves 30%",
      "variant": "success"
    },
    {
      "id": "text-16",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Pay annually"
    },
    {
      "id": "row-5",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge-2",
        "text-16"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "slot": "description",
      "gap": "2",
      "children": [
        "text-15",
        "row-5"
      ]
    },
    {
      "id": "option-card-3",
      "component": "OptionCard",
      "name": "plan",
      "value": "team",
      "children": [
        "row-4",
        "column-3"
      ]
    },
    {
      "id": "text-17",
      "component": "Text",
      "variant": "body",
      "textContent": "Enterprise"
    },
    {
      "id": "text-18",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "For regulated industries"
    },
    {
      "id": "text-19",
      "component": "Text",
      "variant": "body",
      "textContent": "custom"
    },
    {
      "id": "row-6",
      "component": "Row",
      "slot": "heading",
      "align": "baseline",
      "gap": "2",
      "children": [
        "text-17",
        "text-18",
        "text-19"
      ]
    },
    {
      "id": "text-20",
      "component": "Text",
      "variant": "body",
      "textContent": "Dedicated support · DPA · SCIM · on-prem deployment · talk to sales"
    },
    {
      "id": "badge-3",
      "component": "Badge",
      "text": "Volume pricing",
      "variant": "accent"
    },
    {
      "id": "text-21",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Custom contract"
    },
    {
      "id": "row-7",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge-3",
        "text-21"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "slot": "description",
      "gap": "2",
      "children": [
        "text-20",
        "row-7"
      ]
    },
    {
      "id": "option-card-4",
      "component": "OptionCard",
      "name": "plan",
      "value": "enterprise",
      "children": [
        "row-6",
        "column-4"
      ]
    },
    {
      "id": "text-22",
      "component": "Text",
      "variant": "body",
      "textContent": "Something else"
    },
    {
      "id": "text-23",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Tell us what you need"
    },
    {
      "id": "text-24",
      "component": "Text",
      "variant": "body",
      "textContent": "talk to us"
    },
    {
      "id": "row-8",
      "component": "Row",
      "slot": "heading",
      "align": "baseline",
      "gap": "2",
      "children": [
        "text-22",
        "text-23",
        "text-24"
      ]
    },
    {
      "id": "text-25",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "None of these fit? Tell us what you need and we'll quote a custom plan within one business day."
    },
    {
      "id": "custom-requirements",
      "component": "TextArea",
      "label": "Your requirements",
      "name": "custom-requirements",
      "placeholder": "Volume, compliance needs, integrations, deployment constraints — whatever you'd want a sales engineer to know up front.",
      "rows": "4"
    },
    {
      "id": "option-card-5",
      "component": "OptionCard",
      "name": "plan",
      "value": "custom",
      "children": [
        "row-8",
        "text-25",
        "custom-requirements"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "2",
      "children": [
        "option-card",
        "option-card-2",
        "option-card-3",
        "option-card-4",
        "option-card-5"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "data-reg-form": "",
      "children": [
        "column"
      ]
    },
    {
      "id": "plan",
      "component": "Section",
      "data-reg-form": "",
      "children": [
        "section"
      ]
    },
    {
      "id": "column-5",
      "component": "Column"
    },
    {
      "id": "text-26",
      "component": "Text",
      "textContent": "Back",
      "variant": "body"
    },
    {
      "id": "link",
      "component": "Link",
      "href": "/site/examples/registration/import",
      "text": "Back",
      "data-reg-back": "",
      "children": [
        "text-26"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "type": "submit",
      "text": "Continue",
      "variant": "primary"
    },
    {
      "id": "column-6",
      "component": "Column",
      "data-reg-actions": "",
      "children": [
        "link",
        "button"
      ]
    },
    {
      "id": "footer-2",
      "component": "Footer",
      "children": [
        "column-5",
        "column-6"
      ]
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "footer-2"
      ]
    },
    {
      "id": "root",
      "component": "FormContainer",
      "data-reg-input": "",
      "children": [
        "header",
        "plan",
        "footer"
      ]
    }
  ]
}