[{"data":1,"prerenderedAt":522},["ShallowReactive",2],{"content-\u002Fdocs\u002Fgetting-started\u002Fquick-start":3},{"id":4,"title":5,"body":6,"description":507,"extension":508,"meta":509,"metaRows":510,"navigation":107,"path":517,"seo":518,"source":519,"stem":520,"__hash__":521},"docs\u002Fdocs\u002Fgetting-started\u002Fquick-start.md","Quick start",{"type":7,"value":8,"toc":503},"minimark",[9,13,20,23,32,36,40,60,275,282,451,468,472,499],[10,11,5],"h1",{"id":12},"quick-start",[14,15,16],"blockquote",{},[17,18,19],"p",{},"A typed schema, validated inputs, a submit handler. The minimum viable form in five minutes.",[21,22],"docs-meta-table",{},[17,24,25,26,31],{},"Try the form below: clear the password and submit to watch focus pull to the broken field; submit with valid values to see the alert fire. Every behavior on screen comes from the Zod schema in code, which you'll see in the ",[27,28,30],"a",{"href":29},"#build-a-form","Build a form"," section next.",[33,34],"docs-demo",{"label":35,"slug":12},"Sign-in Demo",[37,38,30],"h2",{"id":39},"build-a-form",[17,41,42,43,47,48,51,52,55,56,59],{},"Hand ",[44,45,46],"code",{},"useForm"," a Zod schema and the reactive form comes back ready. This page reaches for three properties on the returned form: ",[44,49,50],{},"register"," for the input binding, ",[44,53,54],{},"handleSubmit"," for the submit gate, and ",[44,57,58],{},"fields"," for per-field error reads.",[61,62,67],"pre",{"className":63,"code":64,"language":65,"meta":66,"style":66},"language-ts shiki shiki-themes github-light github-dark","import { useForm } from 'attaform\u002Fzod'\nimport { z } from 'zod'\n\nconst schema = z.object({\n  email: z.email(),\n  password: z.string().min(8),\n})\n\nconst form = useForm({ schema })\n\nconst onSubmit = form.handleSubmit((values) => {\n  \u002F\u002F values is the parsed Zod output, fully typed.\n  alert(JSON.stringify(values, null, 2))\n})\n","ts","",[44,68,69,89,102,109,132,144,168,174,179,195,200,231,238,270],{"__ignoreMap":66},[70,71,74,78,82,85],"span",{"class":72,"line":73},"line",1,[70,75,77],{"class":76},"szBVR","import",[70,79,81],{"class":80},"sVt8B"," { useForm } ",[70,83,84],{"class":76},"from",[70,86,88],{"class":87},"sZZnC"," 'attaform\u002Fzod'\n",[70,90,92,94,97,99],{"class":72,"line":91},2,[70,93,77],{"class":76},[70,95,96],{"class":80}," { z } ",[70,98,84],{"class":76},[70,100,101],{"class":87}," 'zod'\n",[70,103,105],{"class":72,"line":104},3,[70,106,108],{"emptyLinePlaceholder":107},true,"\n",[70,110,112,115,119,122,125,129],{"class":72,"line":111},4,[70,113,114],{"class":76},"const",[70,116,118],{"class":117},"sj4cs"," schema",[70,120,121],{"class":76}," =",[70,123,124],{"class":80}," z.",[70,126,128],{"class":127},"sScJk","object",[70,130,131],{"class":80},"({\n",[70,133,135,138,141],{"class":72,"line":134},5,[70,136,137],{"class":80},"  email: z.",[70,139,140],{"class":127},"email",[70,142,143],{"class":80},"(),\n",[70,145,147,150,153,156,159,162,165],{"class":72,"line":146},6,[70,148,149],{"class":80},"  password: z.",[70,151,152],{"class":127},"string",[70,154,155],{"class":80},"().",[70,157,158],{"class":127},"min",[70,160,161],{"class":80},"(",[70,163,164],{"class":117},"8",[70,166,167],{"class":80},"),\n",[70,169,171],{"class":72,"line":170},7,[70,172,173],{"class":80},"})\n",[70,175,177],{"class":72,"line":176},8,[70,178,108],{"emptyLinePlaceholder":107},[70,180,182,184,187,189,192],{"class":72,"line":181},9,[70,183,114],{"class":76},[70,185,186],{"class":117}," form",[70,188,121],{"class":76},[70,190,191],{"class":127}," useForm",[70,193,194],{"class":80},"({ schema })\n",[70,196,198],{"class":72,"line":197},10,[70,199,108],{"emptyLinePlaceholder":107},[70,201,203,205,208,210,213,215,218,222,225,228],{"class":72,"line":202},11,[70,204,114],{"class":76},[70,206,207],{"class":117}," onSubmit",[70,209,121],{"class":76},[70,211,212],{"class":80}," form.",[70,214,54],{"class":127},[70,216,217],{"class":80},"((",[70,219,221],{"class":220},"s4XuR","values",[70,223,224],{"class":80},") ",[70,226,227],{"class":76},"=>",[70,229,230],{"class":80}," {\n",[70,232,234],{"class":72,"line":233},12,[70,235,237],{"class":236},"sJ8bj","  \u002F\u002F values is the parsed Zod output, fully typed.\n",[70,239,241,244,246,249,252,255,258,261,264,267],{"class":72,"line":240},13,[70,242,243],{"class":127},"  alert",[70,245,161],{"class":80},[70,247,248],{"class":117},"JSON",[70,250,251],{"class":80},".",[70,253,254],{"class":127},"stringify",[70,256,257],{"class":80},"(values, ",[70,259,260],{"class":117},"null",[70,262,263],{"class":80},", ",[70,265,266],{"class":117},"2",[70,268,269],{"class":80},"))\n",[70,271,273],{"class":72,"line":272},14,[70,274,173],{"class":80},[17,276,277,278,281],{},"Bind inputs to schema paths with ",[44,279,280],{},"v-register",":",[61,283,287],{"className":284,"code":285,"language":286,"meta":66,"style":66},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cform @submit=\"onSubmit\">\n    \u003Cinput v-register=\"form.register('email')\" \u002F>\n    \u003Cem v-if=\"form.fields.email.showErrors\">{{ form.fields.email.firstError?.message }}\u003C\u002Fem>\n\n    \u003Cinput v-register=\"form.register('password')\" type=\"password\" \u002F>\n    \u003Cem v-if=\"form.fields.password.showErrors\">{{ form.fields.password.firstError?.message }}\u003C\u002Fem>\n\n    \u003Cbutton type=\"submit\">Sign in\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n","vue",[44,288,289,301,320,339,361,365,388,408,412,433,442],{"__ignoreMap":66},[70,290,291,294,298],{"class":72,"line":73},[70,292,293],{"class":80},"\u003C",[70,295,297],{"class":296},"s9eBZ","template",[70,299,300],{"class":80},">\n",[70,302,303,306,309,312,315,318],{"class":72,"line":91},[70,304,305],{"class":80},"  \u003C",[70,307,308],{"class":296},"form",[70,310,311],{"class":127}," @submit",[70,313,314],{"class":80},"=",[70,316,317],{"class":87},"\"onSubmit\"",[70,319,300],{"class":80},[70,321,322,325,328,331,333,336],{"class":72,"line":104},[70,323,324],{"class":80},"    \u003C",[70,326,327],{"class":296},"input",[70,329,330],{"class":127}," v-register",[70,332,314],{"class":80},[70,334,335],{"class":87},"\"form.register('email')\"",[70,337,338],{"class":80}," \u002F>\n",[70,340,341,343,346,349,351,354,357,359],{"class":72,"line":111},[70,342,324],{"class":80},[70,344,345],{"class":296},"em",[70,347,348],{"class":127}," v-if",[70,350,314],{"class":80},[70,352,353],{"class":87},"\"form.fields.email.showErrors\"",[70,355,356],{"class":80},">{{ form.fields.email.firstError?.message }}\u003C\u002F",[70,358,345],{"class":296},[70,360,300],{"class":80},[70,362,363],{"class":72,"line":134},[70,364,108],{"emptyLinePlaceholder":107},[70,366,367,369,371,373,375,378,381,383,386],{"class":72,"line":146},[70,368,324],{"class":80},[70,370,327],{"class":296},[70,372,330],{"class":127},[70,374,314],{"class":80},[70,376,377],{"class":87},"\"form.register('password')\"",[70,379,380],{"class":127}," type",[70,382,314],{"class":80},[70,384,385],{"class":87},"\"password\"",[70,387,338],{"class":80},[70,389,390,392,394,396,398,401,404,406],{"class":72,"line":170},[70,391,324],{"class":80},[70,393,345],{"class":296},[70,395,348],{"class":127},[70,397,314],{"class":80},[70,399,400],{"class":87},"\"form.fields.password.showErrors\"",[70,402,403],{"class":80},">{{ form.fields.password.firstError?.message }}\u003C\u002F",[70,405,345],{"class":296},[70,407,300],{"class":80},[70,409,410],{"class":72,"line":176},[70,411,108],{"emptyLinePlaceholder":107},[70,413,414,416,419,421,423,426,429,431],{"class":72,"line":181},[70,415,324],{"class":80},[70,417,418],{"class":296},"button",[70,420,380],{"class":127},[70,422,314],{"class":80},[70,424,425],{"class":87},"\"submit\"",[70,427,428],{"class":80},">Sign in\u003C\u002F",[70,430,418],{"class":296},[70,432,300],{"class":80},[70,434,435,438,440],{"class":72,"line":197},[70,436,437],{"class":80},"  \u003C\u002F",[70,439,308],{"class":296},[70,441,300],{"class":80},[70,443,444,447,449],{"class":72,"line":202},[70,445,446],{"class":80},"\u003C\u002F",[70,448,297],{"class":296},[70,450,300],{"class":80},[17,452,453,456,457,459,460,463,464,467],{},[44,454,455],{},"form.register('email')"," returns what the ",[44,458,280],{}," directive binds to. The directive handles the value read, the write, the coercion, and focus on invalid submit. Errors render via ",[44,461,462],{},"form.fields.\u003Cpath>.firstError?.message",", gated by ",[44,465,466],{},"form.fields.\u003Cpath>.showErrors"," so the form doesn't yell on first paint.",[37,469,471],{"id":470},"whats-next","What's next",[473,474,475,483,492],"ul",{},[476,477,478,482],"li",{},[27,479,481],{"href":480},"\u002Fdocs\u002Fgetting-started\u002Fyour-first-schema","Your first schema",": what Attaform reads from a Zod definition.",[476,484,485,489,490,251],{},[27,486,488],{"href":487},"\u002Fdocs\u002Freading-the-form\u002Fthe-form","The form",": the full reactive surface returned by ",[44,491,46],{},[476,493,494,498],{},[27,495,497],{"href":496},"\u002Fdocs\u002Fvalidation\u002Fwhen-validation-runs","When validation runs",": the moment errors appear.",[500,501,502],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":66,"searchDepth":91,"depth":91,"links":504},[505,506],{"id":39,"depth":91,"text":30},{"id":470,"depth":91,"text":471},"Build your first Attaform in five minutes. A typed Zod schema, validated inputs bound by directive, and a submit handler that knows when the form is ready.","md",{},[511,514],{"label":512,"value":513},"Time","~5 minutes",{"label":515,"value":516},"You'll learn","useForm + register + handleSubmit","\u002Fdocs\u002Fgetting-started\u002Fquick-start",{"title":5,"description":507},null,"docs\u002Fgetting-started\u002Fquick-start","ov3F628lUoCQk0gL4jaqAM5-egGK3_0jVmdzdqhb2Uo",1780949755303]