[{"_1":2,"_77":-5,"_78":-5},"loaderData",{"_3":4,"_7":8},"root",{"_5":6},"version","1.0.20","routes/docs.components.$type.$name.($page)",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_46":47},"type","core","key","form/api","page","api","name","form","doc",{"_19":20,"_21":22,"_23":16,"_24":25,"_30":31,"_32":33,"_9":43,"_44":45},"title","","published",true,"component","body",{"_26":27,"_28":29},"raw","import meta from './Form.meta.tsx';\n\n\n\n\n\n\n \n RadioGroup\n Input\n Select\n Switch\n Textarea\n DatePicker\n Combobox\n \n \n \n \n \n \n \n \n\n\n\n\n\n \n In Dialog\n Firebase App Registration\n Stripe Billing Info\n Stripe Payment Method\n \n \n \n \n \n\n","code","var Component=(()=>{var I=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var C=(o,r)=>()=>(r||o((r={exports:{}}).exports,r),r.exports),S=(o,r)=>{for(var a in r)s(o,a,{get:r[a],enumerable:!0})},u=(o,r,a,d)=>{if(r&&typeof r==\"object\"||typeof r==\"function\")for(let i of F(r))!w.call(o,i)&&i!==a&&s(o,i,{get:()=>r[i],enumerable:!(d=y(r,i))||d.enumerable});return o};var c=(o,r,a)=>(a=o!=null?I(T(o)):{},u(r||!o||!o.__esModule?s(a,\"default\",{value:o,enumerable:!0}):a,o)),V=o=>u(s({},\"__esModule\",{value:!0}),o);var p=C((_,b)=>{b.exports=_jsx_runtime});var M={};S(M,{default:()=>x,frontmatter:()=>D});var e=c(p());var g=`

\n \n \n \n \n \n \n {/* more ... */}\n`;var l=c(p()),v={tags:{tutorial:[\"WIP\"]},description:(0,l.jsxs)(\"span\",{children:[\"Build form like a pro \\u{1F60E} \\uFF0D 100% composible fashion (ie., no render-props) of using \",(0,l.jsx)(\"b\",{className:\"tw:brand\",children:\"React Hook Form\"}),\" with \",(0,l.jsx)(\"b\",{className:\"tw:brand\",children:\"Zod\"}),\".\"]}),anatomy:g};var D={component:\"form\"};function h(o){let{ComponentPageUsage:r,DemoRecipeSection:a,DemoScenariosSection:d,VersatileTabs2:i,VersatileTabs2Content:t,VersatileTabs2List:f,VersatileTabs2Trigger:m}=o.components||{};return r||n(\"ComponentPageUsage\",!0),a||n(\"DemoRecipeSection\",!0),d||n(\"DemoScenariosSection\",!0),i||n(\"VersatileTabs2\",!0),t||n(\"VersatileTabs2Content\",!0),f||n(\"VersatileTabs2List\",!0),m||n(\"VersatileTabs2Trigger\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r,{demoId:\"form-damn-easy-demo\",enableHeading:!0,anatomy:v.anatomy}),`\n`,(0,e.jsx)(d,{}),`\n`,(0,e.jsxs)(i,{defaultValue:\"form-radiogroup-demo\",variant:\"underline\",children:[(0,e.jsxs)(f,{children:[(0,e.jsx)(m,{value:\"form-radiogroup-demo\",children:\"RadioGroup\"}),(0,e.jsx)(m,{value:\"form-input-demo\",children:\"Input\"}),(0,e.jsx)(m,{value:\"form-select-demo\",children:\"Select\"}),(0,e.jsx)(m,{value:\"form-switch-demo\",children:\"Switch\"}),(0,e.jsx)(m,{value:\"form-textarea-demo\",children:\"Textarea\"}),(0,e.jsx)(m,{value:\"form-datepicker-demo\",children:\"DatePicker\"}),(0,e.jsx)(m,{value:\"form-combobox-demo\",children:\"Combobox\"})]}),(0,e.jsx)(t,{value:\"form-radiogroup-demo\",demoId:\"form-radiogroup-demo\"}),(0,e.jsx)(t,{value:\"form-input-demo\",demoId:\"form-input-demo\"}),(0,e.jsx)(t,{value:\"form-select-demo\",demoId:\"form-select-demo\"}),(0,e.jsx)(t,{value:\"form-switch-demo\",demoId:\"form-switch-demo\"}),(0,e.jsx)(t,{value:\"form-textarea-demo\",demoId:\"form-textarea-demo\"}),(0,e.jsx)(t,{value:\"form-datepicker-demo\",demoId:\"form-datepicker-demo\"}),(0,e.jsx)(t,{value:\"form-combobox-demo\",demoId:\"form-combobox-demo\"})]}),`\n`,(0,e.jsx)(a,{}),`\n`,(0,e.jsxs)(i,{defaultValue:\"form-remove-app-from-project\",variant:\"underline\",children:[(0,e.jsxs)(f,{children:[(0,e.jsx)(m,{value:\"form-remove-app-from-project\",children:\"In Dialog\"}),(0,e.jsx)(m,{value:\"form-firebase-register-app\",children:\"Firebase App Registration\"}),(0,e.jsx)(m,{value:\"stripe-billing-info\",children:\"Stripe Billing Info\"}),(0,e.jsx)(m,{value:\"stripe-payment-method\",children:\"Stripe Payment Method\"})]}),(0,e.jsx)(t,{value:\"form-remove-app-from-project\",demoId:\"form-remove-app-from-project\"}),(0,e.jsx)(t,{value:\"form-firebase-register-app\",demoId:\"form-firebase-register-app\"}),(0,e.jsx)(t,{value:\"stripe-billing-info\",demoId:\"stripe-billing-info\"}),(0,e.jsx)(t,{value:\"stripe-payment-method\",demoId:\"stripe-payment-method\"})]})]})}function x(o={}){let{wrapper:r}=o.components||{};return r?(0,e.jsx)(r,{...o,children:(0,e.jsx)(h,{...o})}):h(o)}function n(o,r){throw new Error(\"Expected \"+(r?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return V(M);})();\n;return Component;","_id","components/ui/Form/Form.api.mdx","_raw",{"_34":31,"_35":36,"_37":38,"_39":40,"_41":42},"sourceFilePath","sourceFileName","Form.api.mdx","sourceFileDir","components/ui/Form","contentType","mdx","flattenedPath","components/ui/Form/Form.api","Doc","url","/components/ui/form/form.api","meta",{"_48":49,"_53":54,"_75":76},"tags",{"_50":51},"tutorial",[52],"WIP","description",{"_55":56,"_9":57,"_11":-5,"_58":-5,"_59":60},"$$typeof",["Y","react.transitional.element"],"span","ref","props",{"_61":62},"children",[63,64,70,71,74],"Build form like a pro 😎 － 100% composible fashion (ie., no render-props) of using ",{"_55":56,"_9":65,"_11":-5,"_58":-5,"_59":66},"b",{"_67":68,"_61":69},"className","tw:brand","React Hook Form"," with ",{"_55":56,"_9":65,"_11":-5,"_58":-5,"_59":72},{"_67":68,"_61":73},"Zod",".","anatomy","

form/api

Usage

DEMO / Scenario

DEMO / Recipe