[{"data":1,"prerenderedAt":4293},["ShallowReactive",2],{"docs:forms":3,"demo:form\u002Fhero":4290,"demo:form\u002Fform-action":4291,"demo:form\u002Fzod":4292},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,63,67,72,96,258,278,307,345,349,352,390,512,522,560,578,587,593,882,886,919,1302,1312,1579,1587,1591,1597,1624,1734,1740,1744,1766,1776,1799,1809,2073,2080,2084,2097,2124,2223,2235,2245,2344,2366,2370,2373,2387,2532,2546,2711,2715,2724,3004,3009,3038,3199,3501,3504,3507,3511,3527,3868,3871,3875,3898,4272],[8,9,11],"h1",{"id":10},"forms","Forms",[13,14,15],"p",{},"Validation, Field, and submission.",[13,17,18,19,24,25,29,30,33,34,37,38,41,42,45,46,49,50,29,53,29,56,29,59,62],{},"Form, Field, and Fieldset build on the browser's ",[20,21,23],"a",{"href":22},"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fform-control-infrastructure.html#the-constraint-validation-api","constraint validation API",", so ",[26,27,28],"code",{},"required",", ",[26,31,32],{},"pattern",", and other native rules work without extra wiring. ",[26,35,36],{},"\u003CForm>"," renders a real ",[26,39,40],{},"\u003Cform>"," with ",[26,43,44],{},"novalidate",": it validates itself and shows messages through ",[26,47,48],{},"\u003CField.Error>"," instead of the browser bubble, so the copy is yours to style and translate. Field state — ",[26,51,52],{},"value",[26,54,55],{},"invalid",[26,57,58],{},"dirty",[26,60,61],{},"touched"," — is controllable, so a field can sit under a schema validator or an external form library.",[64,65],"demo",{"name":66},"form\u002Fhero",[68,69,71],"h2",{"id":70},"the-shape-of-a-field","The shape of a field",[13,73,74,75,78,79,82,83,29,86,29,89,92,93,95],{},"A field is a control plus everything that describes it. ",[26,76,77],{},"\u003CField.Root>"," groups them and threads the accessible wiring — ",[26,80,81],{},"for","\u002F",[26,84,85],{},"id",[26,87,88],{},"aria-describedby",[26,90,91],{},"aria-invalid"," — between the parts so you never hand-match an ",[26,94,85],{},".",[97,98,102],"pre",{"language":99,"meta":100,"class":101},"vue","title=\"Anatomy\"","shiki shiki-themes github-light github-dark dark:github-dark",[26,103,105,125,126,125,142,125,154,125,163,125,165,125,174,125,184,125,194,125,205,125,214,125,223,125,232,125,241,125,250],{"class":104},"language-vue",[106,107,110,114,118,122],"span",{"class":108,"style":109},"line","display: inline",[106,111,113],{"style":112},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[106,115,117],{"style":116},"color:#22863A;--shiki-dark:#85E89D","script",[106,119,121],{"style":120},"color:#6F42C1;--shiki-dark:#B392F0"," setup",[106,123,124],{"style":112},">","\n",[106,127,128,132,135,138],{"class":108,"style":109},[106,129,131],{"style":130},"color:#D73A49;--shiki-dark:#F97583","import",[106,133,134],{"style":112}," { Form } ",[106,136,137],{"style":130},"from",[106,139,141],{"style":140},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Fform'",[106,143,144,146,149,151],{"class":108,"style":109},[106,145,131],{"style":130},[106,147,148],{"style":112}," { Field } ",[106,150,137],{"style":130},[106,152,153],{"style":140}," '@shardsui\u002Fvue\u002Ffield'",[106,155,156,159,161],{"class":108,"style":109},[106,157,158],{"style":112},"\u003C\u002F",[106,160,117],{"style":116},[106,162,124],{"style":112},[106,164],{"class":108,"style":109},[106,166,167,169,172],{"class":108,"style":109},[106,168,113],{"style":112},[106,170,171],{"style":116},"template",[106,173,124],{"style":112},[106,175,176,179,182],{"class":108,"style":109},[106,177,178],{"style":112},"  \u003C",[106,180,181],{"style":116},"Form",[106,183,124],{"style":112},[106,185,186,189,192],{"class":108,"style":109},[106,187,188],{"style":112},"    \u003C",[106,190,191],{"style":116},"Field.Root",[106,193,124],{"style":112},[106,195,196,199,202],{"class":108,"style":109},[106,197,198],{"style":112},"      \u003C",[106,200,201],{"style":116},"Field.Label",[106,203,204],{"style":112}," \u002F>",[106,206,207,209,212],{"class":108,"style":109},[106,208,198],{"style":112},[106,210,211],{"style":116},"Field.Control",[106,213,204],{"style":112},[106,215,216,218,221],{"class":108,"style":109},[106,217,198],{"style":112},[106,219,220],{"style":116},"Field.Description",[106,222,204],{"style":112},[106,224,225,227,230],{"class":108,"style":109},[106,226,198],{"style":112},[106,228,229],{"style":116},"Field.Error",[106,231,204],{"style":112},[106,233,234,237,239],{"class":108,"style":109},[106,235,236],{"style":112},"    \u003C\u002F",[106,238,191],{"style":116},[106,240,124],{"style":112},[106,242,243,246,248],{"class":108,"style":109},[106,244,245],{"style":112},"  \u003C\u002F",[106,247,181],{"style":116},[106,249,124],{"style":112},[106,251,252,254,256],{"class":108,"style":109},[106,253,158],{"style":112},[106,255,171],{"style":116},[106,257,124],{"style":112},[13,259,260,261,264,265,267,268,270,271,273,274,277],{},"The ",[26,262,263],{},"name"," on ",[26,266,77],{}," identifies the value on submit. It takes precedence over a ",[26,269,263],{}," on the control itself, so put it on the root and let it cascade. That same ",[26,272,263],{}," is the key the ",[26,275,276],{},"errors"," prop and schema validators match against later.",[13,279,280,281,284,285,29,288,29,291,29,294,29,297,29,300,29,303,306],{},"As the field moves through its lifecycle it reflects state onto every part as ",[26,282,283],{},"data-*"," attributes: ",[26,286,287],{},"data-invalid",[26,289,290],{},"data-valid",[26,292,293],{},"data-touched",[26,295,296],{},"data-dirty",[26,298,299],{},"data-filled",[26,301,302],{},"data-focused",[26,304,305],{},"data-disabled",". Style against those instead of tracking validity in your own refs:",[97,308,310],{"language":99,"meta":309,"class":101},"title=\"Styling from field state\"",[26,311,312,125,320,125,337],{"class":104},[106,313,314,316,318],{"class":108,"style":109},[106,315,113],{"style":112},[106,317,171],{"style":116},[106,319,124],{"style":112},[106,321,322,324,326,329,332,335],{"class":108,"style":109},[106,323,178],{"style":112},[106,325,211],{"style":116},[106,327,328],{"style":120}," class",[106,330,331],{"style":112},"=",[106,333,334],{"style":140},"\"border-gray-200 data-focused:outline-2 data-invalid:border-red-600\"",[106,336,204],{"style":112},[106,338,339,341,343],{"class":108,"style":109},[106,340,158],{"style":112},[106,342,171],{"style":116},[106,344,124],{"style":112},[68,346,348],{"id":347},"giving-every-control-a-name","Giving every control a name",[13,350,351],{},"A control with no accessible name is invisible to a screen reader. How you supply it depends on the control.",[13,353,354,358,359,29,362,365,366,369,370,373,374,373,377,380,381,384,385,389],{},[355,356,357],"strong",{},"Plain inputs"," — ",[26,360,361],{},"Input",[26,363,364],{},"Autocomplete",", the input half of ",[26,367,368],{},"Combobox",", and the checkable controls ",[26,371,372],{},"Checkbox"," \u002F ",[26,375,376],{},"Radio",[26,378,379],{},"Switch"," — take ",[26,382,383],{},"\u003CField.Label>",". The control can sit ",[386,387,388],"em",{},"inside"," its label:",[97,391,393],{"language":99,"meta":392,"class":101},"title=\"Implicitly labeling a switch\"",[26,394,395,125,405,125,415,125,427,125,435,125,437,125,445,125,453,125,461,125,470,125,475,125,483,125,496,125,504],{"class":104},[106,396,397,399,401,403],{"class":108,"style":109},[106,398,113],{"style":112},[106,400,117],{"style":116},[106,402,121],{"style":120},[106,404,124],{"style":112},[106,406,407,409,411,413],{"class":108,"style":109},[106,408,131],{"style":130},[106,410,148],{"style":112},[106,412,137],{"style":130},[106,414,153],{"style":140},[106,416,417,419,422,424],{"class":108,"style":109},[106,418,131],{"style":130},[106,420,421],{"style":112}," { Switch } ",[106,423,137],{"style":130},[106,425,426],{"style":140}," '@shardsui\u002Fvue\u002Fswitch'",[106,428,429,431,433],{"class":108,"style":109},[106,430,158],{"style":112},[106,432,117],{"style":116},[106,434,124],{"style":112},[106,436],{"class":108,"style":109},[106,438,439,441,443],{"class":108,"style":109},[106,440,113],{"style":112},[106,442,171],{"style":116},[106,444,124],{"style":112},[106,446,447,449,451],{"class":108,"style":109},[106,448,178],{"style":112},[106,450,191],{"style":116},[106,452,124],{"style":112},[106,454,455,457,459],{"class":108,"style":109},[106,456,188],{"style":112},[106,458,201],{"style":116},[106,460,124],{"style":112},[106,462,463,465,468],{"class":108,"style":109},[106,464,198],{"style":112},[106,466,467],{"style":116},"Switch.Root",[106,469,204],{"style":112},[106,471,472],{"class":108,"style":109},[106,473,474],{"style":112},"      Developer mode",[106,476,477,479,481],{"class":108,"style":109},[106,478,236],{"style":112},[106,480,201],{"style":116},[106,482,124],{"style":112},[106,484,485,487,489,492,494],{"class":108,"style":109},[106,486,188],{"style":112},[106,488,220],{"style":116},[106,490,491],{"style":112},">Enables extra tools for web developers.\u003C\u002F",[106,493,220],{"style":116},[106,495,124],{"style":112},[106,497,498,500,502],{"class":108,"style":109},[106,499,245],{"style":112},[106,501,191],{"style":116},[106,503,124],{"style":112},[106,505,506,508,510],{"class":108,"style":109},[106,507,158],{"style":112},[106,509,171],{"style":116},[106,511,124],{"style":112},[13,513,514,517,518,521],{},[355,515,516],{},"Trigger-based controls"," carry their own label part, because the thing you click isn't a native ",[26,519,520],{},"\u003Cinput>",":",[523,524,525,535,543],"ul",{},[526,527,528,531,532],"li",{},[26,529,530],{},"Select"," → ",[26,533,534],{},"\u003CSelect.Label>",[526,536,537,539,540],{},[26,538,368],{}," with the input inside the popup → ",[26,541,542],{},"\u003CCombobox.Label>",[526,544,545,531,548,551,552,555,556,559],{},[26,546,547],{},"Slider",[26,549,550],{},"\u003CSlider.Label>","; on a multi-thumb slider, add an ",[26,553,554],{},"aria-label"," to each ",[26,557,558],{},"\u003CSlider.Thumb>"," so the thumbs are told apart.",[13,561,562,564,565,568,569,264,572,574,575,577],{},[26,563,81],{}," only points at native form controls, so when the field's control is a ",[26,566,567],{},"\u003Cbutton>",", set ",[26,570,571],{},"as=\"span\"",[26,573,383],{},": it drops the ",[26,576,81],{}," and forwards a click to the registered control instead.",[13,579,580,583,584,586],{},[355,581,582],{},"No visible label at all?"," Put ",[26,585,554],{}," directly on the control.",[13,588,589,592],{},[26,590,591],{},"\u003CField.Description>"," is registered as the control's accessible description automatically:",[97,594,596],{"language":99,"meta":595,"class":101},"title=\"Labeling a select and a slider\"",[26,597,598,125,608,125,618,125,628,125,640,125,652,125,660,125,662,125,670,125,678,125,686,125,695,125,710,125,719,125,728,125,741,125,749,125,751,125,759,125,776,125,790,125,803,125,812,125,822,125,832,125,841,125,850,125,858,125,866,125,874],{"class":104},[106,599,600,602,604,606],{"class":108,"style":109},[106,601,113],{"style":112},[106,603,117],{"style":116},[106,605,121],{"style":120},[106,607,124],{"style":112},[106,609,610,612,614,616],{"class":108,"style":109},[106,611,131],{"style":130},[106,613,134],{"style":112},[106,615,137],{"style":130},[106,617,141],{"style":140},[106,619,620,622,624,626],{"class":108,"style":109},[106,621,131],{"style":130},[106,623,148],{"style":112},[106,625,137],{"style":130},[106,627,153],{"style":140},[106,629,630,632,635,637],{"class":108,"style":109},[106,631,131],{"style":130},[106,633,634],{"style":112}," { Select } ",[106,636,137],{"style":130},[106,638,639],{"style":140}," '@shardsui\u002Fvue\u002Fselect'",[106,641,642,644,647,649],{"class":108,"style":109},[106,643,131],{"style":130},[106,645,646],{"style":112}," { Slider } ",[106,648,137],{"style":130},[106,650,651],{"style":140}," '@shardsui\u002Fvue\u002Fslider'",[106,653,654,656,658],{"class":108,"style":109},[106,655,158],{"style":112},[106,657,117],{"style":116},[106,659,124],{"style":112},[106,661],{"class":108,"style":109},[106,663,664,666,668],{"class":108,"style":109},[106,665,113],{"style":112},[106,667,171],{"style":116},[106,669,124],{"style":112},[106,671,672,674,676],{"class":108,"style":109},[106,673,178],{"style":112},[106,675,181],{"style":116},[106,677,124],{"style":112},[106,679,680,682,684],{"class":108,"style":109},[106,681,188],{"style":112},[106,683,191],{"style":116},[106,685,124],{"style":112},[106,687,688,690,693],{"class":108,"style":109},[106,689,198],{"style":112},[106,691,692],{"style":116},"Select.Root",[106,694,124],{"style":112},[106,696,697,700,703,706,708],{"class":108,"style":109},[106,698,699],{"style":112},"        \u003C",[106,701,702],{"style":116},"Select.Label",[106,704,705],{"style":112},">Time zone\u003C\u002F",[106,707,702],{"style":116},[106,709,124],{"style":112},[106,711,712,714,717],{"class":108,"style":109},[106,713,699],{"style":112},[106,715,716],{"style":116},"Select.Trigger",[106,718,204],{"style":112},[106,720,721,724,726],{"class":108,"style":109},[106,722,723],{"style":112},"      \u003C\u002F",[106,725,692],{"style":116},[106,727,124],{"style":112},[106,729,730,732,734,737,739],{"class":108,"style":109},[106,731,198],{"style":112},[106,733,220],{"style":116},[106,735,736],{"style":112},">Used for notifications and reminders.\u003C\u002F",[106,738,220],{"style":116},[106,740,124],{"style":112},[106,742,743,745,747],{"class":108,"style":109},[106,744,236],{"style":112},[106,746,191],{"style":116},[106,748,124],{"style":112},[106,750],{"class":108,"style":109},[106,752,753,755,757],{"class":108,"style":109},[106,754,188],{"style":112},[106,756,191],{"style":116},[106,758,124],{"style":112},[106,760,761,763,766,769,771,774],{"class":108,"style":109},[106,762,198],{"style":112},[106,764,765],{"style":116},"Slider.Root",[106,767,768],{"style":120}," :value",[106,770,331],{"style":112},[106,772,773],{"style":140},"\"50\"",[106,775,124],{"style":112},[106,777,778,780,783,786,788],{"class":108,"style":109},[106,779,699],{"style":112},[106,781,782],{"style":116},"Slider.Label",[106,784,785],{"style":112},">Zoom level\u003C\u002F",[106,787,782],{"style":116},[106,789,124],{"style":112},[106,791,792,794,796,799,801],{"class":108,"style":109},[106,793,699],{"style":112},[106,795,220],{"style":116},[106,797,798],{"style":112},">Adjust the size of the interface.\u003C\u002F",[106,800,220],{"style":116},[106,802,124],{"style":112},[106,804,805,807,810],{"class":108,"style":109},[106,806,699],{"style":112},[106,808,809],{"style":116},"Slider.Control",[106,811,124],{"style":112},[106,813,814,817,820],{"class":108,"style":109},[106,815,816],{"style":112},"          \u003C",[106,818,819],{"style":116},"Slider.Track",[106,821,124],{"style":112},[106,823,824,827,830],{"class":108,"style":109},[106,825,826],{"style":112},"            \u003C",[106,828,829],{"style":116},"Slider.Thumb",[106,831,204],{"style":112},[106,833,834,837,839],{"class":108,"style":109},[106,835,836],{"style":112},"          \u003C\u002F",[106,838,819],{"style":116},[106,840,124],{"style":112},[106,842,843,846,848],{"class":108,"style":109},[106,844,845],{"style":112},"        \u003C\u002F",[106,847,809],{"style":116},[106,849,124],{"style":112},[106,851,852,854,856],{"class":108,"style":109},[106,853,723],{"style":112},[106,855,765],{"style":116},[106,857,124],{"style":112},[106,859,860,862,864],{"class":108,"style":109},[106,861,236],{"style":112},[106,863,191],{"style":116},[106,865,124],{"style":112},[106,867,868,870,872],{"class":108,"style":109},[106,869,245],{"style":112},[106,871,181],{"style":116},[106,873,124],{"style":112},[106,875,876,878,880],{"class":108,"style":109},[106,877,158],{"style":112},[106,879,171],{"style":116},[106,881,124],{"style":112},[68,883,885],{"id":884},"grouping-controls-under-one-legend","Grouping controls under one legend",[13,887,888,889,893,894,897,898,901,902,905,906,909,910,913,914,916,917,521],{},"When a single label covers several controls — a price range with two thumbs, a set of radio options — reach for ",[20,890,892],{"href":891},"\u002Ffieldset","Fieldset",". ",[26,895,896],{},"\u003CFieldset.Root>"," renders a ",[26,899,900],{},"\u003Cfieldset>",", and ",[26,903,904],{},"\u003CFieldset.Legend>"," names it with no ",[26,907,908],{},"aria-labelledby"," to wire up. A ",[26,911,912],{},"RadioGroup"," nested inside adopts that legend as its own accessible name; other composites keep their own label part, so a multi-thumb slider still needs an ",[26,915,554],{}," per ",[26,918,558],{},[97,920,923],{"language":99,"meta":921,"class":922},"title=\"A range slider and a radio group, each under a legend\"","shiki shiki-themes github-light github-dark has-highlighted dark:github-dark",[26,924,925,125,935,125,945,125,955,125,967,125,979,125,991,125,1001,125,1009,125,1011,125,1019,125,1027,125,1035,125,1046,125,1060,125,1075,125,1083,125,1091,125,1101,125,1125,125,1147,125,1156,125,1164,125,1172,125,1181,125,1189,125,1191,125,1199,125,1208,125,1221,125,1229,125,1246,125,1261,125,1269,125,1278,125,1286,125,1294],{"class":104},[106,926,927,929,931,933],{"class":108,"style":109},[106,928,113],{"style":112},[106,930,117],{"style":116},[106,932,121],{"style":120},[106,934,124],{"style":112},[106,936,937,939,941,943],{"class":108,"style":109},[106,938,131],{"style":130},[106,940,134],{"style":112},[106,942,137],{"style":130},[106,944,141],{"style":140},[106,946,947,949,951,953],{"class":108,"style":109},[106,948,131],{"style":130},[106,950,148],{"style":112},[106,952,137],{"style":130},[106,954,153],{"style":140},[106,956,957,959,962,964],{"class":108,"style":109},[106,958,131],{"style":130},[106,960,961],{"style":112}," { Fieldset } ",[106,963,137],{"style":130},[106,965,966],{"style":140}," '@shardsui\u002Fvue\u002Ffieldset'",[106,968,969,971,974,976],{"class":108,"style":109},[106,970,131],{"style":130},[106,972,973],{"style":112}," { Radio } ",[106,975,137],{"style":130},[106,977,978],{"style":140}," '@shardsui\u002Fvue\u002Fradio'",[106,980,981,983,986,988],{"class":108,"style":109},[106,982,131],{"style":130},[106,984,985],{"style":112}," { RadioGroup } ",[106,987,137],{"style":130},[106,989,990],{"style":140}," '@shardsui\u002Fvue\u002Fradio-group'",[106,992,993,995,997,999],{"class":108,"style":109},[106,994,131],{"style":130},[106,996,646],{"style":112},[106,998,137],{"style":130},[106,1000,651],{"style":140},[106,1002,1003,1005,1007],{"class":108,"style":109},[106,1004,158],{"style":112},[106,1006,117],{"style":116},[106,1008,124],{"style":112},[106,1010],{"class":108,"style":109},[106,1012,1013,1015,1017],{"class":108,"style":109},[106,1014,113],{"style":112},[106,1016,171],{"style":116},[106,1018,124],{"style":112},[106,1020,1021,1023,1025],{"class":108,"style":109},[106,1022,178],{"style":112},[106,1024,181],{"style":116},[106,1026,124],{"style":112},[106,1028,1029,1031,1033],{"class":108,"style":109},[106,1030,188],{"style":112},[106,1032,191],{"style":116},[106,1034,124],{"style":112},[106,1036,1039,1041,1044],{"class":1037,"style":109},[108,1038],"highlighted",[106,1040,198],{"style":112},[106,1042,1043],{"style":116},"Fieldset.Root",[106,1045,124],{"style":112},[106,1047,1048,1050,1053,1056,1058],{"class":108,"style":109},[106,1049,699],{"style":112},[106,1051,1052],{"style":116},"Fieldset.Legend",[106,1054,1055],{"style":112},">Price range\u003C\u002F",[106,1057,1052],{"style":116},[106,1059,124],{"style":112},[106,1061,1062,1064,1066,1068,1070,1073],{"class":108,"style":109},[106,1063,699],{"style":112},[106,1065,765],{"style":116},[106,1067,768],{"style":120},[106,1069,331],{"style":112},[106,1071,1072],{"style":140},"\"[25, 75]\"",[106,1074,124],{"style":112},[106,1076,1077,1079,1081],{"class":108,"style":109},[106,1078,816],{"style":112},[106,1080,809],{"style":116},[106,1082,124],{"style":112},[106,1084,1085,1087,1089],{"class":108,"style":109},[106,1086,826],{"style":112},[106,1088,819],{"style":116},[106,1090,124],{"style":112},[106,1092,1093,1096,1099],{"class":108,"style":109},[106,1094,1095],{"style":112},"              \u003C",[106,1097,1098],{"style":116},"Slider.Indicator",[106,1100,204],{"style":112},[106,1102,1103,1105,1107,1110,1112,1115,1118,1120,1123],{"class":108,"style":109},[106,1104,1095],{"style":112},[106,1106,829],{"style":116},[106,1108,1109],{"style":120}," :index",[106,1111,331],{"style":112},[106,1113,1114],{"style":140},"\"0\"",[106,1116,1117],{"style":120}," aria-label",[106,1119,331],{"style":112},[106,1121,1122],{"style":140},"\"Minimum price\"",[106,1124,204],{"style":112},[106,1126,1127,1129,1131,1133,1135,1138,1140,1142,1145],{"class":108,"style":109},[106,1128,1095],{"style":112},[106,1130,829],{"style":116},[106,1132,1109],{"style":120},[106,1134,331],{"style":112},[106,1136,1137],{"style":140},"\"1\"",[106,1139,1117],{"style":120},[106,1141,331],{"style":112},[106,1143,1144],{"style":140},"\"Maximum price\"",[106,1146,204],{"style":112},[106,1148,1149,1152,1154],{"class":108,"style":109},[106,1150,1151],{"style":112},"            \u003C\u002F",[106,1153,819],{"style":116},[106,1155,124],{"style":112},[106,1157,1158,1160,1162],{"class":108,"style":109},[106,1159,836],{"style":112},[106,1161,809],{"style":116},[106,1163,124],{"style":112},[106,1165,1166,1168,1170],{"class":108,"style":109},[106,1167,845],{"style":112},[106,1169,765],{"style":116},[106,1171,124],{"style":112},[106,1173,1175,1177,1179],{"class":1174,"style":109},[108,1038],[106,1176,723],{"style":112},[106,1178,1043],{"style":116},[106,1180,124],{"style":112},[106,1182,1183,1185,1187],{"class":108,"style":109},[106,1184,236],{"style":112},[106,1186,191],{"style":116},[106,1188,124],{"style":112},[106,1190],{"class":108,"style":109},[106,1192,1193,1195,1197],{"class":108,"style":109},[106,1194,188],{"style":112},[106,1196,191],{"style":116},[106,1198,124],{"style":112},[106,1200,1202,1204,1206],{"class":1201,"style":109},[108,1038],[106,1203,198],{"style":112},[106,1205,1043],{"style":116},[106,1207,124],{"style":112},[106,1209,1210,1212,1214,1217,1219],{"class":108,"style":109},[106,1211,699],{"style":112},[106,1213,1052],{"style":116},[106,1215,1216],{"style":112},">Storage type\u003C\u002F",[106,1218,1052],{"style":116},[106,1220,124],{"style":112},[106,1222,1223,1225,1227],{"class":108,"style":109},[106,1224,699],{"style":112},[106,1226,912],{"style":116},[106,1228,124],{"style":112},[106,1230,1231,1233,1236,1239,1241,1244],{"class":108,"style":109},[106,1232,816],{"style":112},[106,1234,1235],{"style":116},"Radio.Root",[106,1237,1238],{"style":120}," value",[106,1240,331],{"style":112},[106,1242,1243],{"style":140},"\"ssd\"",[106,1245,204],{"style":112},[106,1247,1248,1250,1252,1254,1256,1259],{"class":108,"style":109},[106,1249,816],{"style":112},[106,1251,1235],{"style":116},[106,1253,1238],{"style":120},[106,1255,331],{"style":112},[106,1257,1258],{"style":140},"\"hdd\"",[106,1260,204],{"style":112},[106,1262,1263,1265,1267],{"class":108,"style":109},[106,1264,845],{"style":112},[106,1266,912],{"style":116},[106,1268,124],{"style":112},[106,1270,1272,1274,1276],{"class":1271,"style":109},[108,1038],[106,1273,723],{"style":112},[106,1275,1043],{"style":116},[106,1277,124],{"style":112},[106,1279,1280,1282,1284],{"class":108,"style":109},[106,1281,236],{"style":112},[106,1283,191],{"style":116},[106,1285,124],{"style":112},[106,1287,1288,1290,1292],{"class":108,"style":109},[106,1289,245],{"style":112},[106,1291,181],{"style":116},[106,1293,124],{"style":112},[106,1295,1296,1298,1300],{"class":108,"style":109},[106,1297,158],{"style":112},[106,1299,171],{"style":116},[106,1301,124],{"style":112},[13,1303,1304,1305,1308,1309,521],{},"When each option in a checkbox or radio group needs its ",[386,1306,1307],{},"own"," label and description, wrap it in ",[26,1310,1311],{},"\u003CField.Item>",[97,1313,1315],{"language":99,"meta":1314,"class":922},"title=\"Labeling each checkbox in a group\"",[26,1316,1317,125,1327,125,1337,125,1347,125,1359,125,1371,125,1379,125,1381,125,1389,125,1397,125,1405,125,1418,125,1427,125,1437,125,1453,125,1466,125,1479,125,1488,125,1497,125,1512,125,1525,125,1538,125,1547,125,1555,125,1563,125,1571],{"class":104},[106,1318,1319,1321,1323,1325],{"class":108,"style":109},[106,1320,113],{"style":112},[106,1322,117],{"style":116},[106,1324,121],{"style":120},[106,1326,124],{"style":112},[106,1328,1329,1331,1333,1335],{"class":108,"style":109},[106,1330,131],{"style":130},[106,1332,148],{"style":112},[106,1334,137],{"style":130},[106,1336,153],{"style":140},[106,1338,1339,1341,1343,1345],{"class":108,"style":109},[106,1340,131],{"style":130},[106,1342,961],{"style":112},[106,1344,137],{"style":130},[106,1346,966],{"style":140},[106,1348,1349,1351,1354,1356],{"class":108,"style":109},[106,1350,131],{"style":130},[106,1352,1353],{"style":112}," { Checkbox } ",[106,1355,137],{"style":130},[106,1357,1358],{"style":140}," '@shardsui\u002Fvue\u002Fcheckbox'",[106,1360,1361,1363,1366,1368],{"class":108,"style":109},[106,1362,131],{"style":130},[106,1364,1365],{"style":112}," { CheckboxGroup } ",[106,1367,137],{"style":130},[106,1369,1370],{"style":140}," '@shardsui\u002Fvue\u002Fcheckbox-group'",[106,1372,1373,1375,1377],{"class":108,"style":109},[106,1374,158],{"style":112},[106,1376,117],{"style":116},[106,1378,124],{"style":112},[106,1380],{"class":108,"style":109},[106,1382,1383,1385,1387],{"class":108,"style":109},[106,1384,113],{"style":112},[106,1386,171],{"style":116},[106,1388,124],{"style":112},[106,1390,1391,1393,1395],{"class":108,"style":109},[106,1392,178],{"style":112},[106,1394,191],{"style":116},[106,1396,124],{"style":112},[106,1398,1399,1401,1403],{"class":108,"style":109},[106,1400,188],{"style":112},[106,1402,1043],{"style":116},[106,1404,124],{"style":112},[106,1406,1407,1409,1411,1414,1416],{"class":108,"style":109},[106,1408,198],{"style":112},[106,1410,1052],{"style":116},[106,1412,1413],{"style":112},">Backup schedule\u003C\u002F",[106,1415,1052],{"style":116},[106,1417,124],{"style":112},[106,1419,1420,1422,1425],{"class":108,"style":109},[106,1421,198],{"style":112},[106,1423,1424],{"style":116},"CheckboxGroup",[106,1426,124],{"style":112},[106,1428,1430,1432,1435],{"class":1429,"style":109},[108,1038],[106,1431,699],{"style":112},[106,1433,1434],{"style":116},"Field.Item",[106,1436,124],{"style":112},[106,1438,1439,1441,1444,1446,1448,1451],{"class":108,"style":109},[106,1440,816],{"style":112},[106,1442,1443],{"style":116},"Checkbox.Root",[106,1445,1238],{"style":120},[106,1447,331],{"style":112},[106,1449,1450],{"style":140},"\"daily\"",[106,1452,204],{"style":112},[106,1454,1455,1457,1459,1462,1464],{"class":108,"style":109},[106,1456,816],{"style":112},[106,1458,201],{"style":116},[106,1460,1461],{"style":112},">Daily\u003C\u002F",[106,1463,201],{"style":116},[106,1465,124],{"style":112},[106,1467,1468,1470,1472,1475,1477],{"class":108,"style":109},[106,1469,816],{"style":112},[106,1471,220],{"style":116},[106,1473,1474],{"style":112},">Every day at 00:00.\u003C\u002F",[106,1476,220],{"style":116},[106,1478,124],{"style":112},[106,1480,1482,1484,1486],{"class":1481,"style":109},[108,1038],[106,1483,845],{"style":112},[106,1485,1434],{"style":116},[106,1487,124],{"style":112},[106,1489,1491,1493,1495],{"class":1490,"style":109},[108,1038],[106,1492,699],{"style":112},[106,1494,1434],{"style":116},[106,1496,124],{"style":112},[106,1498,1499,1501,1503,1505,1507,1510],{"class":108,"style":109},[106,1500,816],{"style":112},[106,1502,1443],{"style":116},[106,1504,1238],{"style":120},[106,1506,331],{"style":112},[106,1508,1509],{"style":140},"\"monthly\"",[106,1511,204],{"style":112},[106,1513,1514,1516,1518,1521,1523],{"class":108,"style":109},[106,1515,816],{"style":112},[106,1517,201],{"style":116},[106,1519,1520],{"style":112},">Monthly\u003C\u002F",[106,1522,201],{"style":116},[106,1524,124],{"style":112},[106,1526,1527,1529,1531,1534,1536],{"class":108,"style":109},[106,1528,816],{"style":112},[106,1530,220],{"style":116},[106,1532,1533],{"style":112},">On the 5th at 23:59.\u003C\u002F",[106,1535,220],{"style":116},[106,1537,124],{"style":112},[106,1539,1541,1543,1545],{"class":1540,"style":109},[108,1038],[106,1542,845],{"style":112},[106,1544,1434],{"style":116},[106,1546,124],{"style":112},[106,1548,1549,1551,1553],{"class":108,"style":109},[106,1550,723],{"style":112},[106,1552,1424],{"style":116},[106,1554,124],{"style":112},[106,1556,1557,1559,1561],{"class":108,"style":109},[106,1558,236],{"style":112},[106,1560,1043],{"style":116},[106,1562,124],{"style":112},[106,1564,1565,1567,1569],{"class":108,"style":109},[106,1566,245],{"style":112},[106,1568,191],{"style":116},[106,1570,124],{"style":112},[106,1572,1573,1575,1577],{"class":108,"style":109},[106,1574,158],{"style":112},[106,1576,171],{"style":116},[106,1578,124],{"style":112},[13,1580,1581,1582,1584,1585,95],{},"Non-native controls (Select, Slider, a checkbox or radio group) submit through a hidden input whose ",[26,1583,263],{}," comes from the surrounding ",[26,1586,77],{},[68,1588,1590],{"id":1589},"native-constraint-validation","Native constraint validation",[13,1592,1593,1596],{},[26,1594,1595],{},"\u003CField.Control>"," forwards standard HTML validation attributes, and the field reads their result straight from the constraint validation API:",[523,1598,1599,1604,1613,1618],{},[526,1600,1601,1603],{},[26,1602,28],{},": the field must have a value.",[526,1605,1606,373,1609,1612],{},[26,1607,1608],{},"minlength",[26,1610,1611],{},"maxlength",": bounds on text length.",[526,1614,1615,1617],{},[26,1616,32],{},": a regular expression the value must match.",[526,1619,1620,1623],{},[26,1621,1622],{},"step",": a numeric increment the value must be a multiple of.",[97,1625,1627],{"language":99,"meta":1626,"class":101},"title=\"Constraints on a URL field\"",[26,1628,1629,125,1639,125,1649,125,1657,125,1659,125,1667,125,1683,125,1710,125,1718,125,1726],{"class":104},[106,1630,1631,1633,1635,1637],{"class":108,"style":109},[106,1632,113],{"style":112},[106,1634,117],{"style":116},[106,1636,121],{"style":120},[106,1638,124],{"style":112},[106,1640,1641,1643,1645,1647],{"class":108,"style":109},[106,1642,131],{"style":130},[106,1644,148],{"style":112},[106,1646,137],{"style":130},[106,1648,153],{"style":140},[106,1650,1651,1653,1655],{"class":108,"style":109},[106,1652,158],{"style":112},[106,1654,117],{"style":116},[106,1656,124],{"style":112},[106,1658],{"class":108,"style":109},[106,1660,1661,1663,1665],{"class":108,"style":109},[106,1662,113],{"style":112},[106,1664,171],{"style":116},[106,1666,124],{"style":112},[106,1668,1669,1671,1673,1676,1678,1681],{"class":108,"style":109},[106,1670,178],{"style":112},[106,1672,191],{"style":116},[106,1674,1675],{"style":120}," name",[106,1677,331],{"style":112},[106,1679,1680],{"style":140},"\"website\"",[106,1682,124],{"style":112},[106,1684,1685,1687,1689,1692,1694,1697,1700,1703,1705,1708],{"class":108,"style":109},[106,1686,188],{"style":112},[106,1688,211],{"style":116},[106,1690,1691],{"style":120}," type",[106,1693,331],{"style":112},[106,1695,1696],{"style":140},"\"url\"",[106,1698,1699],{"style":120}," required",[106,1701,1702],{"style":120}," pattern",[106,1704,331],{"style":112},[106,1706,1707],{"style":140},"\"https?:\u002F\u002F.*\"",[106,1709,204],{"style":112},[106,1711,1712,1714,1716],{"class":108,"style":109},[106,1713,188],{"style":112},[106,1715,229],{"style":116},[106,1717,204],{"style":112},[106,1719,1720,1722,1724],{"class":108,"style":109},[106,1721,245],{"style":112},[106,1723,191],{"style":116},[106,1725,124],{"style":112},[106,1727,1728,1730,1732],{"class":108,"style":109},[106,1729,158],{"style":112},[106,1731,171],{"style":116},[106,1733,124],{"style":112},[13,1735,1736,1737,1739],{},"An empty ",[26,1738,48],{}," renders the browser's own message for whichever constraint failed.",[68,1741,1743],{"id":1742},"custom-validation","Custom validation",[13,1745,1746,1747,1749,1750,1753,1754,1757,1758,1760,1761,95],{},"Hand ",[26,1748,77],{}," a ",[26,1751,1752],{},"validate"," function for logic the native attributes can't express. It receives the field's value and the full form values, and returns an error string, an array of strings, or ",[26,1755,1756],{},"null"," when valid. It's allowed to be async, but an async result never holds up a submission: the form submits before a pending ",[26,1759,1752],{}," resolves. Checks that must gate the submit belong on the server, fed back through ",[20,1762,1764],{"href":1763},"#server-returned-errors",[26,1765,276],{},[13,1767,1768,1771,1772,1775],{},[26,1769,1770],{},"validationMode"," decides ",[386,1773,1774],{},"when"," it fires:",[523,1777,1778,1787,1793],{},[526,1779,1780,1783,1784,1786],{},[26,1781,1782],{},"onSubmit"," (default): validate every field when the ",[26,1785,36],{}," submits; after that first attempt, each field revalidates as its value changes.",[526,1788,1789,1792],{},[26,1790,1791],{},"onBlur",": validate when focus leaves the field.",[526,1794,1795,1798],{},[26,1796,1797],{},"onChange",": validate on every value change, e.g. each keystroke.",[13,1800,1801,1802,1804,1805,1808],{},"For ",[26,1803,1797],{}," against a network call, ",[26,1806,1807],{},"validationDebounceTime"," (milliseconds) debounces the callback.",[97,1810,1812],{"language":99,"meta":1811,"class":101},"title=\"Async username check, debounced per keystroke\"",[26,1813,1814,125,1824,125,1834,125,1836,125,1856,125,1872,125,1880,125,1885,125,1887,125,1918,125,1931,125,1943,125,1947,125,1949,125,1957,125,1962,125,1970,125,1972,125,1980,125,1986,125,1996,125,2006,125,2016,125,2026,125,2031,125,2049,125,2057,125,2065],{"class":104},[106,1815,1816,1818,1820,1822],{"class":108,"style":109},[106,1817,113],{"style":112},[106,1819,117],{"style":116},[106,1821,121],{"style":120},[106,1823,124],{"style":112},[106,1825,1826,1828,1830,1832],{"class":108,"style":109},[106,1827,131],{"style":130},[106,1829,148],{"style":112},[106,1831,137],{"style":130},[106,1833,153],{"style":140},[106,1835],{"class":108,"style":109},[106,1837,1838,1841,1844,1847,1850,1853],{"class":108,"style":109},[106,1839,1840],{"style":130},"async",[106,1842,1843],{"style":130}," function",[106,1845,1846],{"style":120}," validateUsername",[106,1848,1849],{"style":112},"(",[106,1851,52],{"style":1852},"color:#E36209;--shiki-dark:#FFAB70",[106,1854,1855],{"style":112},") {",[106,1857,1858,1861,1864,1867,1870],{"class":108,"style":109},[106,1859,1860],{"style":130},"  if",[106,1862,1863],{"style":112}," (value ",[106,1865,1866],{"style":130},"===",[106,1868,1869],{"style":140}," 'admin'",[106,1871,1855],{"style":112},[106,1873,1874,1877],{"class":108,"style":109},[106,1875,1876],{"style":130},"    return",[106,1878,1879],{"style":140}," 'Reserved for system use.'",[106,1881,1882],{"class":108,"style":109},[106,1883,1884],{"style":112},"  }",[106,1886],{"class":108,"style":109},[106,1888,1889,1892,1896,1899,1902,1905,1907,1910,1912,1915],{"class":108,"style":109},[106,1890,1891],{"style":130},"  const",[106,1893,1895],{"style":1894},"color:#005CC5;--shiki-dark:#79B8FF"," result",[106,1897,1898],{"style":130}," =",[106,1900,1901],{"style":130}," await",[106,1903,1904],{"style":120}," fetch",[106,1906,1849],{"style":112},[106,1908,1909],{"style":140},"`https:\u002F\u002Fapi.example.com\u002Fusernames\u002F${",[106,1911,52],{"style":112},[106,1913,1914],{"style":140},"}`",[106,1916,1917],{"style":112},")",[106,1919,1920,1922,1925,1928],{"class":108,"style":109},[106,1921,1860],{"style":130},[106,1923,1924],{"style":112}," (",[106,1926,1927],{"style":130},"!",[106,1929,1930],{"style":112},"result.ok) {",[106,1932,1933,1935,1938,1940],{"class":108,"style":109},[106,1934,1876],{"style":130},[106,1936,1937],{"style":140}," `${",[106,1939,52],{"style":112},[106,1941,1942],{"style":140},"} is unavailable.`",[106,1944,1945],{"class":108,"style":109},[106,1946,1884],{"style":112},[106,1948],{"class":108,"style":109},[106,1950,1951,1954],{"class":108,"style":109},[106,1952,1953],{"style":130},"  return",[106,1955,1956],{"style":1894}," null",[106,1958,1959],{"class":108,"style":109},[106,1960,1961],{"style":112},"}",[106,1963,1964,1966,1968],{"class":108,"style":109},[106,1965,158],{"style":112},[106,1967,117],{"style":116},[106,1969,124],{"style":112},[106,1971],{"class":108,"style":109},[106,1973,1974,1976,1978],{"class":108,"style":109},[106,1975,113],{"style":112},[106,1977,171],{"style":116},[106,1979,124],{"style":112},[106,1981,1982,1984],{"class":108,"style":109},[106,1983,178],{"style":112},[106,1985,191],{"style":116},[106,1987,1988,1991,1993],{"class":108,"style":109},[106,1989,1990],{"style":120},"    name",[106,1992,331],{"style":112},[106,1994,1995],{"style":140},"\"username\"",[106,1997,1998,2001,2003],{"class":108,"style":109},[106,1999,2000],{"style":120},"    validation-mode",[106,2002,331],{"style":112},[106,2004,2005],{"style":140},"\"onChange\"",[106,2007,2008,2011,2013],{"class":108,"style":109},[106,2009,2010],{"style":120},"    :validation-debounce-time",[106,2012,331],{"style":112},[106,2014,2015],{"style":140},"\"300\"",[106,2017,2018,2021,2023],{"class":108,"style":109},[106,2019,2020],{"style":120},"    :validate",[106,2022,331],{"style":112},[106,2024,2025],{"style":140},"\"validateUsername\"",[106,2027,2028],{"class":108,"style":109},[106,2029,2030],{"style":112},"  >",[106,2032,2033,2035,2037,2039,2042,2044,2047],{"class":108,"style":109},[106,2034,188],{"style":112},[106,2036,211],{"style":116},[106,2038,1699],{"style":120},[106,2040,2041],{"style":120}," minlength",[106,2043,331],{"style":112},[106,2045,2046],{"style":140},"\"3\"",[106,2048,204],{"style":112},[106,2050,2051,2053,2055],{"class":108,"style":109},[106,2052,188],{"style":112},[106,2054,229],{"style":116},[106,2056,204],{"style":112},[106,2058,2059,2061,2063],{"class":108,"style":109},[106,2060,245],{"style":112},[106,2062,191],{"style":116},[106,2064,124],{"style":112},[106,2066,2067,2069,2071],{"class":108,"style":109},[106,2068,158],{"style":112},[106,2070,171],{"style":116},[106,2072,124],{"style":112},[13,2074,2075,2077,2078,95],{},[26,2076,1770],{}," set on a field wins over the one on ",[26,2079,36],{},[68,2081,2083],{"id":2082},"showing-the-error","Showing the error",[13,2085,2086,2088,2089,2092,2093,2096],{},[26,2087,48],{}," with no content shows the field's current message whenever it's invalid, or a ",[26,2090,2091],{},"\u003Cul>"," of them when more than one applies. Give it a ",[26,2094,2095],{},"match"," prop to take control:",[523,2098,2099,2114],{},[526,2100,2101,2102,2105,2106,2109,2110,2113],{},"a ",[26,2103,2104],{},"ValidityState"," key like ",[26,2107,2108],{},"\"valueMissing\""," or ",[26,2111,2112],{},"\"patternMismatch\""," renders only when that specific flag is set, giving you the hook for per-reason, translatable copy;",[526,2115,2116,2119,2120,2123],{},[26,2117,2118],{},":match=\"true\""," always renders; ",[26,2121,2122],{},":match=\"false\""," (or omitted) renders whenever the field is invalid or carries a form error.",[97,2125,2127],{"language":99,"meta":2126,"class":101},"title=\"Custom copy per validity reason\"",[26,2128,2129,125,2137,125,2151,125,2167,125,2187,125,2207,125,2215],{"class":104},[106,2130,2131,2133,2135],{"class":108,"style":109},[106,2132,113],{"style":112},[106,2134,171],{"style":116},[106,2136,124],{"style":112},[106,2138,2139,2141,2143,2145,2147,2149],{"class":108,"style":109},[106,2140,178],{"style":112},[106,2142,191],{"style":116},[106,2144,1675],{"style":120},[106,2146,331],{"style":112},[106,2148,1995],{"style":140},[106,2150,124],{"style":112},[106,2152,2153,2155,2157,2159,2161,2163,2165],{"class":108,"style":109},[106,2154,188],{"style":112},[106,2156,211],{"style":116},[106,2158,1699],{"style":120},[106,2160,2041],{"style":120},[106,2162,331],{"style":112},[106,2164,2046],{"style":140},[106,2166,204],{"style":112},[106,2168,2169,2171,2173,2176,2178,2180,2183,2185],{"class":108,"style":109},[106,2170,188],{"style":112},[106,2172,229],{"style":116},[106,2174,2175],{"style":120}," match",[106,2177,331],{"style":112},[106,2179,2108],{"style":140},[106,2181,2182],{"style":112},">You must choose a username.\u003C\u002F",[106,2184,229],{"style":116},[106,2186,124],{"style":112},[106,2188,2189,2191,2193,2195,2197,2200,2203,2205],{"class":108,"style":109},[106,2190,188],{"style":112},[106,2192,229],{"style":116},[106,2194,2175],{"style":120},[106,2196,331],{"style":112},[106,2198,2199],{"style":140},"\"tooShort\"",[106,2201,2202],{"style":112},">At least 3 characters.\u003C\u002F",[106,2204,229],{"style":116},[106,2206,124],{"style":112},[106,2208,2209,2211,2213],{"class":108,"style":109},[106,2210,245],{"style":112},[106,2212,191],{"style":116},[106,2214,124],{"style":112},[106,2216,2217,2219,2221],{"class":108,"style":109},[106,2218,158],{"style":112},[106,2220,171],{"style":116},[106,2222,124],{"style":112},[13,2224,2225,2227,2228,2231,2232,95],{},[26,2226,48],{}," participates in enter\u002Fexit animation. It exposes ",[26,2229,2230],{},"data-starting-style"," and ",[26,2233,2234],{},"data-ending-style",[13,2236,2237,2238,2240,2241,2244],{},"For anything the ",[26,2239,2095],{}," cases can't cover, ",[26,2242,2243],{},"\u003CField.Validity>"," hands you the raw validity state in a scoped slot:",[97,2246,2248],{"language":99,"meta":2247,"class":101},"title=\"Rendering from raw validity state\"",[26,2249,2250,125,2258,125,2275,125,2291,125,2320,125,2328,125,2336],{"class":104},[106,2251,2252,2254,2256],{"class":108,"style":109},[106,2253,113],{"style":112},[106,2255,171],{"style":116},[106,2257,124],{"style":112},[106,2259,2260,2262,2265,2268,2270,2273],{"class":108,"style":109},[106,2261,178],{"style":112},[106,2263,2264],{"style":116},"Field.Validity",[106,2266,2267],{"style":120}," v-slot",[106,2269,331],{"style":112},[106,2271,2272],{"style":140},"\"{ errors }\"",[106,2274,124],{"style":112},[106,2276,2277,2279,2281,2284,2286,2289],{"class":108,"style":109},[106,2278,188],{"style":112},[106,2280,523],{"style":116},[106,2282,2283],{"style":120}," v-if",[106,2285,331],{"style":112},[106,2287,2288],{"style":140},"\"errors.length\"",[106,2290,124],{"style":112},[106,2292,2293,2295,2297,2300,2302,2305,2308,2310,2313,2316,2318],{"class":108,"style":109},[106,2294,198],{"style":112},[106,2296,526],{"style":116},[106,2298,2299],{"style":120}," v-for",[106,2301,331],{"style":112},[106,2303,2304],{"style":140},"\"message in errors\"",[106,2306,2307],{"style":120}," :key",[106,2309,331],{"style":112},[106,2311,2312],{"style":140},"\"message\"",[106,2314,2315],{"style":112},">{{ message }}\u003C\u002F",[106,2317,526],{"style":116},[106,2319,124],{"style":112},[106,2321,2322,2324,2326],{"class":108,"style":109},[106,2323,236],{"style":112},[106,2325,523],{"style":116},[106,2327,124],{"style":112},[106,2329,2330,2332,2334],{"class":108,"style":109},[106,2331,245],{"style":112},[106,2333,2264],{"style":116},[106,2335,124],{"style":112},[106,2337,2338,2340,2342],{"class":108,"style":109},[106,2339,158],{"style":112},[106,2341,171],{"style":116},[106,2343,124],{"style":112},[13,2345,2346,2347,2350,2351,2353,2354,2357,2358,29,2360,901,2363,95],{},"The slot also receives ",[26,2348,2349],{},"validity"," (the ",[26,2352,2104],{}," flags), ",[26,2355,2356],{},"error"," (the first message), ",[26,2359,52],{},[26,2361,2362],{},"initialValue",[26,2364,2365],{},"transitionStatus",[68,2367,2369],{"id":2368},"submitting","Submitting",[13,2371,2372],{},"Two listeners, depending on the shape you want the values in.",[13,2374,2375,2376,2379,2380,2383,2384,521],{},"Reach for the native ",[26,2377,2378],{},"submit"," event when you want the raw ",[26,2381,2382],{},"FormData",". It runs only after validation passes, and you own the ",[26,2385,2386],{},"preventDefault()",[97,2388,2390],{"language":99,"meta":2389,"class":101},"title=\"Native submission\"",[26,2391,2392,125,2402,125,2412,125,2414,125,2430,125,2441,125,2459,125,2480,125,2484,125,2492,125,2494,125,2502,125,2524],{"class":104},[106,2393,2394,2396,2398,2400],{"class":108,"style":109},[106,2395,113],{"style":112},[106,2397,117],{"style":116},[106,2399,121],{"style":120},[106,2401,124],{"style":112},[106,2403,2404,2406,2408,2410],{"class":108,"style":109},[106,2405,131],{"style":130},[106,2407,134],{"style":112},[106,2409,137],{"style":130},[106,2411,141],{"style":140},[106,2413],{"class":108,"style":109},[106,2415,2416,2418,2420,2423,2425,2428],{"class":108,"style":109},[106,2417,1840],{"style":130},[106,2419,1843],{"style":130},[106,2421,2422],{"style":120}," onSubmit",[106,2424,1849],{"style":112},[106,2426,2427],{"style":1852},"event",[106,2429,1855],{"style":112},[106,2431,2432,2435,2438],{"class":108,"style":109},[106,2433,2434],{"style":112},"  event.",[106,2436,2437],{"style":120},"preventDefault",[106,2439,2440],{"style":112},"()",[106,2442,2443,2445,2448,2450,2453,2456],{"class":108,"style":109},[106,2444,1891],{"style":130},[106,2446,2447],{"style":1894}," formData",[106,2449,1898],{"style":130},[106,2451,2452],{"style":130}," new",[106,2454,2455],{"style":120}," FormData",[106,2457,2458],{"style":112},"(event.currentTarget)",[106,2460,2461,2464,2466,2468,2471,2474,2477],{"class":108,"style":109},[106,2462,2463],{"style":130},"  await",[106,2465,1904],{"style":120},[106,2467,1849],{"style":112},[106,2469,2470],{"style":140},"'https:\u002F\u002Fapi.example.com'",[106,2472,2473],{"style":112},", { method: ",[106,2475,2476],{"style":140},"'POST'",[106,2478,2479],{"style":112},", body: formData })",[106,2481,2482],{"class":108,"style":109},[106,2483,1961],{"style":112},[106,2485,2486,2488,2490],{"class":108,"style":109},[106,2487,158],{"style":112},[106,2489,117],{"style":116},[106,2491,124],{"style":112},[106,2493],{"class":108,"style":109},[106,2495,2496,2498,2500],{"class":108,"style":109},[106,2497,113],{"style":112},[106,2499,171],{"style":116},[106,2501,124],{"style":112},[106,2503,2504,2506,2508,2511,2513,2515,2518,2520,2522],{"class":108,"style":109},[106,2505,178],{"style":112},[106,2507,181],{"style":116},[106,2509,2510],{"style":112}," @",[106,2512,2378],{"style":120},[106,2514,331],{"style":112},[106,2516,2517],{"style":140},"\"",[106,2519,1782],{"style":112},[106,2521,2517],{"style":140},[106,2523,204],{"style":112},[106,2525,2526,2528,2530],{"class":108,"style":109},[106,2527,158],{"style":112},[106,2529,171],{"style":116},[106,2531,124],{"style":112},[13,2533,2534,2535,2538,2539,2542,2543,2545],{},"Reach for the ",[26,2536,2537],{},"formSubmit"," event — bound as ",[26,2540,2541],{},"@form-submit"," — when you'd rather reshape the values as a plain object before sending. It calls ",[26,2544,2386],{}," on the native submit event for you:",[97,2547,2549],{"language":99,"meta":2548,"class":101},"title=\"Submission as a JavaScript object\"",[26,2550,2551,125,2561,125,2571,125,2573,125,2589,125,2601,125,2606,125,2611,125,2615,125,2628,125,2638,125,2654,125,2659,125,2663,125,2671,125,2673,125,2681,125,2703],{"class":104},[106,2552,2553,2555,2557,2559],{"class":108,"style":109},[106,2554,113],{"style":112},[106,2556,117],{"style":116},[106,2558,121],{"style":120},[106,2560,124],{"style":112},[106,2562,2563,2565,2567,2569],{"class":108,"style":109},[106,2564,131],{"style":130},[106,2566,134],{"style":112},[106,2568,137],{"style":130},[106,2570,141],{"style":140},[106,2572],{"class":108,"style":109},[106,2574,2575,2577,2579,2582,2584,2587],{"class":108,"style":109},[106,2576,1840],{"style":130},[106,2578,1843],{"style":130},[106,2580,2581],{"style":120}," onFormSubmit",[106,2583,1849],{"style":112},[106,2585,2586],{"style":1852},"values",[106,2588,1855],{"style":112},[106,2590,2591,2593,2596,2598],{"class":108,"style":109},[106,2592,1891],{"style":130},[106,2594,2595],{"style":1894}," payload",[106,2597,1898],{"style":130},[106,2599,2600],{"style":112}," {",[106,2602,2603],{"class":108,"style":109},[106,2604,2605],{"style":112},"    product_id: values.id,",[106,2607,2608],{"class":108,"style":109},[106,2609,2610],{"style":112},"    order_quantity: values.quantity",[106,2612,2613],{"class":108,"style":109},[106,2614,1884],{"style":112},[106,2616,2617,2619,2621,2623,2625],{"class":108,"style":109},[106,2618,2463],{"style":130},[106,2620,1904],{"style":120},[106,2622,1849],{"style":112},[106,2624,2470],{"style":140},[106,2626,2627],{"style":112},", {",[106,2629,2630,2633,2635],{"class":108,"style":109},[106,2631,2632],{"style":112},"    method: ",[106,2634,2476],{"style":140},[106,2636,2637],{"style":112},",",[106,2639,2640,2643,2646,2648,2651],{"class":108,"style":109},[106,2641,2642],{"style":112},"    body: ",[106,2644,2645],{"style":1894},"JSON",[106,2647,95],{"style":112},[106,2649,2650],{"style":120},"stringify",[106,2652,2653],{"style":112},"(payload)",[106,2655,2656],{"class":108,"style":109},[106,2657,2658],{"style":112},"  })",[106,2660,2661],{"class":108,"style":109},[106,2662,1961],{"style":112},[106,2664,2665,2667,2669],{"class":108,"style":109},[106,2666,158],{"style":112},[106,2668,117],{"style":116},[106,2670,124],{"style":112},[106,2672],{"class":108,"style":109},[106,2674,2675,2677,2679],{"class":108,"style":109},[106,2676,113],{"style":112},[106,2678,171],{"style":116},[106,2680,124],{"style":112},[106,2682,2683,2685,2687,2689,2692,2694,2696,2699,2701],{"class":108,"style":109},[106,2684,178],{"style":112},[106,2686,181],{"style":116},[106,2688,2510],{"style":112},[106,2690,2691],{"style":120},"form-submit",[106,2693,331],{"style":112},[106,2695,2517],{"style":140},[106,2697,2698],{"style":112},"onFormSubmit",[106,2700,2517],{"style":140},[106,2702,204],{"style":112},[106,2704,2705,2707,2709],{"class":108,"style":109},[106,2706,158],{"style":112},[106,2708,171],{"style":116},[106,2710,124],{"style":112},[68,2712,2714],{"id":2713},"server-returned-errors","Server-returned errors",[13,2716,2717,2718,2720,2721,2723],{},"Validation that can only happen on the server — a promo code that's expired, a username already taken — comes back as an ",[26,2719,276],{}," prop. Shape it as an object keyed by field ",[26,2722,263],{},", each value one message or an array of them. The library merges those into the matching fields' state and focuses the first invalid one. As soon as a field's value changes, its server error drops out on its own.",[97,2725,2727],{"language":99,"meta":2726,"class":101},"title=\"Merging server errors back into fields\"",[26,2728,2729,125,2739,125,2751,125,2761,125,2771,125,2773,125,2789,125,2802,125,2806,125,2808,125,2828,125,2830,125,2844,125,2852,125,2873,125,2892,125,2896,125,2904,125,2906,125,2914,125,2949,125,2964,125,2972,125,2980,125,2988,125,2996],{"class":104},[106,2730,2731,2733,2735,2737],{"class":108,"style":109},[106,2732,113],{"style":112},[106,2734,117],{"style":116},[106,2736,121],{"style":120},[106,2738,124],{"style":112},[106,2740,2741,2743,2746,2748],{"class":108,"style":109},[106,2742,131],{"style":130},[106,2744,2745],{"style":112}," { shallowRef } ",[106,2747,137],{"style":130},[106,2749,2750],{"style":140}," 'vue'",[106,2752,2753,2755,2757,2759],{"class":108,"style":109},[106,2754,131],{"style":130},[106,2756,134],{"style":112},[106,2758,137],{"style":130},[106,2760,141],{"style":140},[106,2762,2763,2765,2767,2769],{"class":108,"style":109},[106,2764,131],{"style":130},[106,2766,148],{"style":112},[106,2768,137],{"style":130},[106,2770,153],{"style":140},[106,2772],{"class":108,"style":109},[106,2774,2775,2777,2779,2782,2784,2787],{"class":108,"style":109},[106,2776,1840],{"style":130},[106,2778,1843],{"style":130},[106,2780,2781],{"style":120}," submitToServer",[106,2783,1849],{"style":112},[106,2785,2786],{"style":1852},"payload",[106,2788,1855],{"style":112},[106,2790,2791,2793,2796,2799],{"class":108,"style":109},[106,2792,1953],{"style":130},[106,2794,2795],{"style":112}," { errors: { promoCode: ",[106,2797,2798],{"style":140},"'This promo code has expired.'",[106,2800,2801],{"style":112}," } }",[106,2803,2804],{"class":108,"style":109},[106,2805,1961],{"style":112},[106,2807],{"class":108,"style":109},[106,2809,2810,2813,2816,2820,2822,2825],{"class":108,"style":109},[106,2811,2812],{"style":130},"const",[106,2814,2815],{"style":1894}," ",[106,2817,276],{"style":1894,"class":2818},[2819],"highlighted-word",[106,2821,1898],{"style":130},[106,2823,2824],{"style":120}," shallowRef",[106,2826,2827],{"style":112},"({})",[106,2829],{"class":108,"style":109},[106,2831,2832,2834,2836,2838,2840,2842],{"class":108,"style":109},[106,2833,1840],{"style":130},[106,2835,1843],{"style":130},[106,2837,2422],{"style":120},[106,2839,1849],{"style":112},[106,2841,2427],{"style":1852},[106,2843,1855],{"style":112},[106,2845,2846,2848,2850],{"class":108,"style":109},[106,2847,2434],{"style":112},[106,2849,2437],{"style":120},[106,2851,2440],{"style":112},[106,2853,2854,2856,2859,2861,2863,2865,2867,2871],{"class":108,"style":109},[106,2855,1891],{"style":130},[106,2857,2858],{"style":1894}," response",[106,2860,1898],{"style":130},[106,2862,1901],{"style":130},[106,2864,2781],{"style":120},[106,2866,1849],{"style":112},[106,2868,2870],{"style":2869},"color:#6A737D;--shiki-dark:#6A737D","\u002F* … *\u002F",[106,2872,1917],{"style":112},[106,2874,2875,2878,2881,2884,2886,2889],{"class":108,"style":109},[106,2876,2877],{"style":112},"  ",[106,2879,276],{"style":112,"class":2880},[2819],[106,2882,2883],{"style":112},".value ",[106,2885,331],{"style":130},[106,2887,2888],{"style":112}," response.",[106,2890,276],{"style":112,"class":2891},[2819],[106,2893,2894],{"class":108,"style":109},[106,2895,1961],{"style":112},[106,2897,2898,2900,2902],{"class":108,"style":109},[106,2899,158],{"style":112},[106,2901,117],{"style":116},[106,2903,124],{"style":112},[106,2905],{"class":108,"style":109},[106,2907,2908,2910,2912],{"class":108,"style":109},[106,2909,113],{"style":112},[106,2911,171],{"style":116},[106,2913,124],{"style":112},[106,2915,2916,2918,2920,2923,2926,2928,2930,2933,2935,2937,2939,2941,2943,2945,2947],{"class":108,"style":109},[106,2917,178],{"style":112},[106,2919,181],{"style":116},[106,2921,2922],{"style":112}," :",[106,2924,276],{"style":120,"class":2925},[2819],[106,2927,331],{"style":112},[106,2929,2517],{"style":140},[106,2931,276],{"style":112,"class":2932},[2819],[106,2934,2517],{"style":140},[106,2936,2510],{"style":112},[106,2938,2378],{"style":120},[106,2940,331],{"style":112},[106,2942,2517],{"style":140},[106,2944,1782],{"style":112},[106,2946,2517],{"style":140},[106,2948,124],{"style":112},[106,2950,2951,2953,2955,2957,2959,2962],{"class":108,"style":109},[106,2952,188],{"style":112},[106,2954,191],{"style":116},[106,2956,1675],{"style":120},[106,2958,331],{"style":112},[106,2960,2961],{"style":140},"\"promoCode\"",[106,2963,124],{"style":112},[106,2965,2966,2968,2970],{"class":108,"style":109},[106,2967,198],{"style":112},[106,2969,211],{"style":116},[106,2971,204],{"style":112},[106,2973,2974,2976,2978],{"class":108,"style":109},[106,2975,198],{"style":112},[106,2977,229],{"style":116},[106,2979,204],{"style":112},[106,2981,2982,2984,2986],{"class":108,"style":109},[106,2983,236],{"style":112},[106,2985,191],{"style":116},[106,2987,124],{"style":112},[106,2989,2990,2992,2994],{"class":108,"style":109},[106,2991,245],{"style":112},[106,2993,181],{"style":116},[106,2995,124],{"style":112},[106,2997,2998,3000,3002],{"class":108,"style":109},[106,2999,158],{"style":112},[106,3001,171],{"style":116},[106,3003,124],{"style":112},[3005,3006,3008],"h3",{"id":3007},"server-returned-errors-with-a-nuxt-server-route","With a Nuxt server route",[13,3010,3011,3012,3016,3017,3019,3020,3022,3023,29,3025,2231,3028,3031,3032,3034,3035,3037],{},"Put the check in a ",[20,3013,3015],{"href":3014},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fserver","server route",", return failures keyed by field name, and let the page feed them back through ",[26,3018,276],{},". Because ",[26,3021,36],{}," renders a genuine ",[26,3024,40],{},[26,3026,3027],{},"method",[26,3029,3030],{},"action"," pass straight through and the form works with JavaScript off; with it on, post the ",[26,3033,2382],{}," from the ",[26,3036,2378],{}," listener instead.",[97,3039,3042],{"language":3040,"meta":3041,"class":101},"ts","title=\"server\u002Fapi\u002Flogin.post.ts\"",[26,3043,3045,125,3080,125,3085,125,3089,125,3091,125,3118,125,3135,125,3148,125,3150,125,3161,125,3178,125,3182,125,3194],{"class":3044},"language-ts",[106,3046,3047,3050,3053,3055,3058,3060,3062,3064,3066,3069,3072,3074,3077],{"class":108,"style":109},[106,3048,3049],{"style":130},"function",[106,3051,3052],{"style":120}," authenticateUser",[106,3054,1849],{"style":112},[106,3056,3057],{"style":1852},"data",[106,3059,521],{"style":130},[106,3061,2455],{"style":120},[106,3063,1917],{"style":112},[106,3065,521],{"style":130},[106,3067,3068],{"style":112}," { ",[106,3070,3071],{"style":1852},"success",[106,3073,521],{"style":130},[106,3075,3076],{"style":1894}," boolean",[106,3078,3079],{"style":112}," } {",[106,3081,3082],{"class":108,"style":109},[106,3083,3084],{"style":2869},"  \u002F\u002F your auth logic",[106,3086,3087],{"class":108,"style":109},[106,3088,1961],{"style":112},[106,3090],{"class":108,"style":109},[106,3092,3093,3096,3099,3102,3104,3106,3108,3110,3113,3116],{"class":108,"style":109},[106,3094,3095],{"style":130},"export",[106,3097,3098],{"style":130}," default",[106,3100,3101],{"style":120}," defineEventHandler",[106,3103,1849],{"style":112},[106,3105,1840],{"style":130},[106,3107,1924],{"style":112},[106,3109,2427],{"style":1852},[106,3111,3112],{"style":112},") ",[106,3114,3115],{"style":130},"=>",[106,3117,2600],{"style":112},[106,3119,3120,3122,3125,3127,3129,3132],{"class":108,"style":109},[106,3121,1891],{"style":130},[106,3123,3124],{"style":1894}," data",[106,3126,1898],{"style":130},[106,3128,1901],{"style":130},[106,3130,3131],{"style":120}," readFormData",[106,3133,3134],{"style":112},"(event)",[106,3136,3137,3139,3141,3143,3145],{"class":108,"style":109},[106,3138,1891],{"style":130},[106,3140,1895],{"style":1894},[106,3142,1898],{"style":130},[106,3144,3052],{"style":120},[106,3146,3147],{"style":112},"(data)",[106,3149],{"class":108,"style":109},[106,3151,3152,3154,3156,3158],{"class":108,"style":109},[106,3153,1860],{"style":130},[106,3155,1924],{"style":112},[106,3157,1927],{"style":130},[106,3159,3160],{"style":112},"result.success) {",[106,3162,3163,3165,3167,3170,3173,3176],{"class":108,"style":109},[106,3164,1876],{"style":130},[106,3166,3068],{"style":112},[106,3168,276],{"style":112,"class":3169},[2819],[106,3171,3172],{"style":112},": { password: ",[106,3174,3175],{"style":140},"'Invalid username or password.'",[106,3177,2801],{"style":112},[106,3179,3180],{"class":108,"style":109},[106,3181,1884],{"style":112},[106,3183,3184,3186,3188,3191],{"class":108,"style":109},[106,3185,1953],{"style":130},[106,3187,3068],{"style":112},[106,3189,276],{"style":112,"class":3190},[2819],[106,3192,3193],{"style":112},": {} }",[106,3195,3196],{"class":108,"style":109},[106,3197,3198],{"style":112},"})",[97,3200,3202],{"language":99,"meta":3201,"class":101},"title=\"pages\u002Flogin.vue\"",[26,3203,3204,125,3222,125,3232,125,3249,125,3259,125,3261,125,3280,125,3282,125,3301,125,3309,125,3333,125,3358,125,3368,125,3372,125,3380,125,3382,125,3390,125,3440,125,3455,125,3469,125,3477,125,3485,125,3493],{"class":104},[106,3205,3206,3208,3210,3212,3215,3217,3220],{"class":108,"style":109},[106,3207,113],{"style":112},[106,3209,117],{"style":116},[106,3211,121],{"style":120},[106,3213,3214],{"style":120}," lang",[106,3216,331],{"style":112},[106,3218,3219],{"style":140},"\"ts\"",[106,3221,124],{"style":112},[106,3223,3224,3226,3228,3230],{"class":108,"style":109},[106,3225,131],{"style":130},[106,3227,2745],{"style":112},[106,3229,137],{"style":130},[106,3231,2750],{"style":140},[106,3233,3234,3236,3239,3242,3245,3247],{"class":108,"style":109},[106,3235,131],{"style":130},[106,3237,3238],{"style":112}," { Form, ",[106,3240,3241],{"style":130},"type",[106,3243,3244],{"style":112}," FormErrors } ",[106,3246,137],{"style":130},[106,3248,141],{"style":140},[106,3250,3251,3253,3255,3257],{"class":108,"style":109},[106,3252,131],{"style":130},[106,3254,148],{"style":112},[106,3256,137],{"style":130},[106,3258,153],{"style":140},[106,3260],{"class":108,"style":109},[106,3262,3263,3265,3268,3270,3272,3274,3277],{"class":108,"style":109},[106,3264,2812],{"style":130},[106,3266,3267],{"style":1894}," errors",[106,3269,1898],{"style":130},[106,3271,2824],{"style":120},[106,3273,113],{"style":112},[106,3275,3276],{"style":120},"FormErrors",[106,3278,3279],{"style":112},">({})",[106,3281],{"class":108,"style":109},[106,3283,3284,3286,3288,3290,3292,3294,3296,3299],{"class":108,"style":109},[106,3285,1840],{"style":130},[106,3287,1843],{"style":130},[106,3289,2422],{"style":120},[106,3291,1849],{"style":112},[106,3293,2427],{"style":1852},[106,3295,521],{"style":130},[106,3297,3298],{"style":120}," SubmitEvent",[106,3300,1855],{"style":112},[106,3302,3303,3305,3307],{"class":108,"style":109},[106,3304,2434],{"style":112},[106,3306,2437],{"style":120},[106,3308,2440],{"style":112},[106,3310,3311,3313,3316,3318,3320,3322,3325,3328,3331],{"class":108,"style":109},[106,3312,1891],{"style":130},[106,3314,3315],{"style":1894}," body",[106,3317,1898],{"style":130},[106,3319,2452],{"style":130},[106,3321,2455],{"style":120},[106,3323,3324],{"style":112},"(event.currentTarget ",[106,3326,3327],{"style":130},"as",[106,3329,3330],{"style":120}," HTMLFormElement",[106,3332,1917],{"style":112},[106,3334,3335,3337,3339,3341,3343,3346,3348,3351,3353,3355],{"class":108,"style":109},[106,3336,1891],{"style":130},[106,3338,2858],{"style":1894},[106,3340,1898],{"style":130},[106,3342,1901],{"style":130},[106,3344,3345],{"style":120}," $fetch",[106,3347,1849],{"style":112},[106,3349,3350],{"style":140},"'\u002Fapi\u002Flogin'",[106,3352,2473],{"style":112},[106,3354,2476],{"style":140},[106,3356,3357],{"style":112},", body })",[106,3359,3360,3363,3365],{"class":108,"style":109},[106,3361,3362],{"style":112},"  errors.value ",[106,3364,331],{"style":130},[106,3366,3367],{"style":112}," response.errors",[106,3369,3370],{"class":108,"style":109},[106,3371,1961],{"style":112},[106,3373,3374,3376,3378],{"class":108,"style":109},[106,3375,158],{"style":112},[106,3377,117],{"style":116},[106,3379,124],{"style":112},[106,3381],{"class":108,"style":109},[106,3383,3384,3386,3388],{"class":108,"style":109},[106,3385,113],{"style":112},[106,3387,171],{"style":116},[106,3389,124],{"style":112},[106,3391,3392,3394,3396,3399,3401,3404,3407,3409,3412,3414,3417,3419,3421,3424,3426,3428,3430,3432,3434,3436,3438],{"class":108,"style":109},[106,3393,178],{"style":112},[106,3395,181],{"style":116},[106,3397,3398],{"style":120}," method",[106,3400,331],{"style":112},[106,3402,3403],{"style":140},"\"POST\"",[106,3405,3406],{"style":120}," action",[106,3408,331],{"style":112},[106,3410,3411],{"style":140},"\"\u002Fapi\u002Flogin\"",[106,3413,2922],{"style":112},[106,3415,276],{"style":120,"class":3416},[2819],[106,3418,331],{"style":112},[106,3420,2517],{"style":140},[106,3422,276],{"style":112,"class":3423},[2819],[106,3425,2517],{"style":140},[106,3427,2510],{"style":112},[106,3429,2378],{"style":120},[106,3431,331],{"style":112},[106,3433,2517],{"style":140},[106,3435,1782],{"style":112},[106,3437,2517],{"style":140},[106,3439,124],{"style":112},[106,3441,3442,3444,3446,3448,3450,3453],{"class":108,"style":109},[106,3443,188],{"style":112},[106,3445,191],{"style":116},[106,3447,1675],{"style":120},[106,3449,331],{"style":112},[106,3451,3452],{"style":140},"\"password\"",[106,3454,124],{"style":112},[106,3456,3457,3459,3461,3463,3465,3467],{"class":108,"style":109},[106,3458,198],{"style":112},[106,3460,211],{"style":116},[106,3462,1691],{"style":120},[106,3464,331],{"style":112},[106,3466,3452],{"style":140},[106,3468,204],{"style":112},[106,3470,3471,3473,3475],{"class":108,"style":109},[106,3472,198],{"style":112},[106,3474,229],{"style":116},[106,3476,204],{"style":112},[106,3478,3479,3481,3483],{"class":108,"style":109},[106,3480,236],{"style":112},[106,3482,191],{"style":116},[106,3484,124],{"style":112},[106,3486,3487,3489,3491],{"class":108,"style":109},[106,3488,245],{"style":112},[106,3490,181],{"style":116},[106,3492,124],{"style":112},[106,3494,3495,3497,3499],{"class":108,"style":109},[106,3496,158],{"style":112},[106,3498,171],{"style":116},[106,3500,124],{"style":112},[13,3502,3503],{},"The demo below simulates the server error shape on the client.",[64,3505],{"name":3506},"form\u002Fform-action",[68,3508,3510],{"id":3509},"schema-validation-with-zod","Schema validation with Zod",[13,3512,3513,3514,3517,3518,893,3520,3523,3524,3526],{},"Keep validation rules in one schema object. Parse the submitted values with ",[26,3515,3516],{},"safeParse",", then map the schema's per-field errors onto ",[26,3519,276],{},[26,3521,3522],{},"z.flattenError(result.error).fieldErrors"," is already keyed by field ",[26,3525,263],{},", so it drops in with no remapping:",[97,3528,3530],{"language":99,"meta":3529,"class":101},"title=\"Validating the submitted object with a schema\"",[26,3531,3532,125,3542,125,3552,125,3564,125,3574,125,3584,125,3586,125,3604,125,3631,125,3657,125,3661,125,3663,125,3678,125,3694,125,3704,125,3724,125,3728,125,3735,125,3739,125,3741,125,3753,125,3755,125,3769,125,3783,125,3791,125,3795,125,3803,125,3805,125,3813,125,3847,125,3852,125,3860],{"class":104},[106,3533,3534,3536,3538,3540],{"class":108,"style":109},[106,3535,113],{"style":112},[106,3537,117],{"style":116},[106,3539,121],{"style":120},[106,3541,124],{"style":112},[106,3543,3544,3546,3548,3550],{"class":108,"style":109},[106,3545,131],{"style":130},[106,3547,2745],{"style":112},[106,3549,137],{"style":130},[106,3551,2750],{"style":140},[106,3553,3554,3556,3559,3561],{"class":108,"style":109},[106,3555,131],{"style":130},[106,3557,3558],{"style":112}," { z } ",[106,3560,137],{"style":130},[106,3562,3563],{"style":140}," 'zod'",[106,3565,3566,3568,3570,3572],{"class":108,"style":109},[106,3567,131],{"style":130},[106,3569,134],{"style":112},[106,3571,137],{"style":130},[106,3573,141],{"style":140},[106,3575,3576,3578,3580,3582],{"class":108,"style":109},[106,3577,131],{"style":130},[106,3579,148],{"style":112},[106,3581,137],{"style":130},[106,3583,153],{"style":140},[106,3585],{"class":108,"style":109},[106,3587,3588,3590,3593,3595,3598,3601],{"class":108,"style":109},[106,3589,2812],{"style":130},[106,3591,3592],{"style":1894}," schema",[106,3594,1898],{"style":130},[106,3596,3597],{"style":112}," z.",[106,3599,3600],{"style":120},"object",[106,3602,3603],{"style":112},"({",[106,3605,3606,3609,3612,3615,3618,3620,3623,3625,3628],{"class":108,"style":109},[106,3607,3608],{"style":112},"  name: z.",[106,3610,3611],{"style":120},"string",[106,3613,3614],{"style":112},"().",[106,3616,3617],{"style":120},"min",[106,3619,1849],{"style":112},[106,3621,3622],{"style":1894},"1",[106,3624,29],{"style":112},[106,3626,3627],{"style":140},"'Name is required'",[106,3629,3630],{"style":112},"),",[106,3632,3633,3636,3639,3641,3644,3647,3650,3652,3655],{"class":108,"style":109},[106,3634,3635],{"style":112},"  age: z.coerce.",[106,3637,3638],{"style":120},"number",[106,3640,1849],{"style":112},[106,3642,3643],{"style":140},"'Age must be a number'",[106,3645,3646],{"style":112},").",[106,3648,3649],{"style":120},"positive",[106,3651,1849],{"style":112},[106,3653,3654],{"style":140},"'Age must be positive'",[106,3656,1917],{"style":112},[106,3658,3659],{"class":108,"style":109},[106,3660,3198],{"style":112},[106,3662],{"class":108,"style":109},[106,3664,3665,3667,3669,3672,3674,3676],{"class":108,"style":109},[106,3666,1840],{"style":130},[106,3668,1843],{"style":130},[106,3670,3671],{"style":120}," submitForm",[106,3673,1849],{"style":112},[106,3675,2586],{"style":1852},[106,3677,1855],{"style":112},[106,3679,3680,3682,3684,3686,3689,3691],{"class":108,"style":109},[106,3681,1891],{"style":130},[106,3683,1895],{"style":1894},[106,3685,1898],{"style":130},[106,3687,3688],{"style":112}," schema.",[106,3690,3516],{"style":120},[106,3692,3693],{"style":112},"(values)",[106,3695,3696,3698,3700,3702],{"class":108,"style":109},[106,3697,1860],{"style":130},[106,3699,1924],{"style":112},[106,3701,1927],{"style":130},[106,3703,3160],{"style":112},[106,3705,3706,3708,3711,3714,3717,3721],{"class":108,"style":109},[106,3707,1876],{"style":130},[106,3709,3710],{"style":112}," { errors: z.",[106,3712,3713],{"style":120},"flattenError",[106,3715,3716],{"style":112},"(result.error).",[106,3718,3720],{"style":112,"class":3719},[2819],"fieldErrors",[106,3722,3723],{"style":112}," }",[106,3725,3726],{"class":108,"style":109},[106,3727,1884],{"style":112},[106,3729,3730,3732],{"class":108,"style":109},[106,3731,1953],{"style":130},[106,3733,3734],{"style":112}," { errors: {} }",[106,3736,3737],{"class":108,"style":109},[106,3738,1961],{"style":112},[106,3740],{"class":108,"style":109},[106,3742,3743,3745,3747,3749,3751],{"class":108,"style":109},[106,3744,2812],{"style":130},[106,3746,3267],{"style":1894},[106,3748,1898],{"style":130},[106,3750,2824],{"style":120},[106,3752,2827],{"style":112},[106,3754],{"class":108,"style":109},[106,3756,3757,3759,3761,3763,3765,3767],{"class":108,"style":109},[106,3758,1840],{"style":130},[106,3760,1843],{"style":130},[106,3762,2581],{"style":120},[106,3764,1849],{"style":112},[106,3766,2586],{"style":1852},[106,3768,1855],{"style":112},[106,3770,3771,3773,3775,3777,3779,3781],{"class":108,"style":109},[106,3772,1891],{"style":130},[106,3774,2858],{"style":1894},[106,3776,1898],{"style":130},[106,3778,1901],{"style":130},[106,3780,3671],{"style":120},[106,3782,3693],{"style":112},[106,3784,3785,3787,3789],{"class":108,"style":109},[106,3786,3362],{"style":112},[106,3788,331],{"style":130},[106,3790,3367],{"style":112},[106,3792,3793],{"class":108,"style":109},[106,3794,1961],{"style":112},[106,3796,3797,3799,3801],{"class":108,"style":109},[106,3798,158],{"style":112},[106,3800,117],{"style":116},[106,3802,124],{"style":112},[106,3804],{"class":108,"style":109},[106,3806,3807,3809,3811],{"class":108,"style":109},[106,3808,113],{"style":112},[106,3810,171],{"style":116},[106,3812,124],{"style":112},[106,3814,3815,3817,3819,3821,3824,3826,3828,3831,3833,3835,3837,3839,3841,3843,3845],{"class":108,"style":109},[106,3816,178],{"style":112},[106,3818,181],{"style":116},[106,3820,2922],{"style":112},[106,3822,276],{"style":120,"class":3823},[2819],[106,3825,331],{"style":112},[106,3827,2517],{"style":140},[106,3829,276],{"style":112,"class":3830},[2819],[106,3832,2517],{"style":140},[106,3834,2510],{"style":112},[106,3836,2691],{"style":120},[106,3838,331],{"style":112},[106,3840,2517],{"style":140},[106,3842,2698],{"style":112},[106,3844,2517],{"style":140},[106,3846,124],{"style":112},[106,3848,3849],{"class":108,"style":109},[106,3850,3851],{"style":2869},"    \u003C!-- fields keyed by name -->",[106,3853,3854,3856,3858],{"class":108,"style":109},[106,3855,245],{"style":112},[106,3857,181],{"style":116},[106,3859,124],{"style":112},[106,3861,3862,3864,3866],{"class":108,"style":109},[106,3863,158],{"style":112},[106,3865,171],{"style":116},[106,3867,124],{"style":112},[64,3869],{"name":3870},"form\u002Fzod",[68,3872,3874],{"id":3873},"driving-a-field-from-an-external-library","Driving a field from an external library",[13,3876,3877,3878,3880,3881,29,3883,901,3885,3887,3888,3880,3890,3893,3894,3897],{},"When something else owns form state — a dedicated form library, or your own store — a field becomes fully controlled. ",[26,3879,77],{}," accepts ",[26,3882,55],{},[26,3884,58],{},[26,3886,61],{},"; ",[26,3889,1595],{},[26,3891,3892],{},"v-model:value"," and the native listeners the library needs to keep those in sync; and ",[26,3895,3896],{},"\u003CField.Error :match=\"...\">"," lets it decide when the message shows:",[97,3899,3901],{"language":99,"meta":3900,"class":922},"title=\"A field wired to external state\"",[26,3902,3903,125,3919,125,3929,125,3931,125,3936,125,3984,125,3994,125,4003,125,4012,125,4021,125,4030,125,4040,125,4062,125,4084,125,4089,125,4097,125,4099,125,4107,125,4148,125,4161,125,4169,125,4174,125,4182,125,4189,125,4199,125,4209,125,4219,125,4229,125,4234,125,4256,125,4264],{"class":104},[106,3904,3905,3907,3909,3911,3913,3915,3917],{"class":108,"style":109},[106,3906,113],{"style":112},[106,3908,117],{"style":116},[106,3910,121],{"style":120},[106,3912,3214],{"style":120},[106,3914,331],{"style":112},[106,3916,3219],{"style":140},[106,3918,124],{"style":112},[106,3920,3921,3923,3925,3927],{"class":108,"style":109},[106,3922,131],{"style":130},[106,3924,148],{"style":112},[106,3926,137],{"style":130},[106,3928,153],{"style":140},[106,3930],{"class":108,"style":109},[106,3932,3933],{"class":108,"style":109},[106,3934,3935],{"style":2869},"\u002F\u002F supplied by your form library",[106,3937,3938,3940,3942,3944,3946,3948,3950,3952,3954,3956,3958,3960,3962,3964,3966,3969,3971,3973,3976,3978,3981],{"class":108,"style":109},[106,3939,2812],{"style":130},[106,3941,3068],{"style":112},[106,3943,263],{"style":1894},[106,3945,29],{"style":112},[106,3947,52],{"style":1894},[106,3949,29],{"style":112},[106,3951,55],{"style":1894},[106,3953,29],{"style":112},[106,3955,58],{"style":1894},[106,3957,29],{"style":112},[106,3959,61],{"style":1894},[106,3961,29],{"style":112},[106,3963,2356],{"style":1894},[106,3965,29],{"style":112},[106,3967,3968],{"style":1894},"onValueChange",[106,3970,29],{"style":112},[106,3972,1791],{"style":1894},[106,3974,3975],{"style":112}," } ",[106,3977,331],{"style":130},[106,3979,3980],{"style":120}," defineProps",[106,3982,3983],{"style":112},"\u003C{",[106,3985,3986,3989,3991],{"class":108,"style":109},[106,3987,3988],{"style":1852},"  name",[106,3990,521],{"style":130},[106,3992,3993],{"style":1894}," string",[106,3995,3996,3999,4001],{"class":108,"style":109},[106,3997,3998],{"style":1852},"  value",[106,4000,521],{"style":130},[106,4002,3993],{"style":1894},[106,4004,4005,4008,4010],{"class":108,"style":109},[106,4006,4007],{"style":1852},"  invalid",[106,4009,521],{"style":130},[106,4011,3076],{"style":1894},[106,4013,4014,4017,4019],{"class":108,"style":109},[106,4015,4016],{"style":1852},"  dirty",[106,4018,521],{"style":130},[106,4020,3076],{"style":1894},[106,4022,4023,4026,4028],{"class":108,"style":109},[106,4024,4025],{"style":1852},"  touched",[106,4027,521],{"style":130},[106,4029,3076],{"style":1894},[106,4031,4032,4035,4038],{"class":108,"style":109},[106,4033,4034],{"style":1852},"  error",[106,4036,4037],{"style":130},"?:",[106,4039,3993],{"style":1894},[106,4041,4042,4045,4047,4049,4051,4053,4055,4057,4059],{"class":108,"style":109},[106,4043,4044],{"style":120},"  onValueChange",[106,4046,521],{"style":130},[106,4048,1924],{"style":112},[106,4050,52],{"style":1852},[106,4052,521],{"style":130},[106,4054,3993],{"style":1894},[106,4056,3112],{"style":112},[106,4058,3115],{"style":130},[106,4060,4061],{"style":1894}," void",[106,4063,4064,4067,4069,4071,4073,4075,4078,4080,4082],{"class":108,"style":109},[106,4065,4066],{"style":120},"  onBlur",[106,4068,521],{"style":130},[106,4070,1924],{"style":112},[106,4072,2427],{"style":1852},[106,4074,521],{"style":130},[106,4076,4077],{"style":120}," FocusEvent",[106,4079,3112],{"style":112},[106,4081,3115],{"style":130},[106,4083,4061],{"style":1894},[106,4085,4086],{"class":108,"style":109},[106,4087,4088],{"style":112},"}>()",[106,4090,4091,4093,4095],{"class":108,"style":109},[106,4092,158],{"style":112},[106,4094,117],{"style":116},[106,4096,124],{"style":112},[106,4098],{"class":108,"style":109},[106,4100,4101,4103,4105],{"class":108,"style":109},[106,4102,113],{"style":112},[106,4104,171],{"style":116},[106,4106,124],{"style":112},[106,4108,4110,4112,4114,4117,4119,4122,4125,4127,4130,4133,4135,4138,4141,4143,4146],{"class":4109,"style":109},[108,1038],[106,4111,178],{"style":112},[106,4113,191],{"style":116},[106,4115,4116],{"style":120}," :name",[106,4118,331],{"style":112},[106,4120,4121],{"style":140},"\"name\"",[106,4123,4124],{"style":120}," :invalid",[106,4126,331],{"style":112},[106,4128,4129],{"style":140},"\"invalid\"",[106,4131,4132],{"style":120}," :dirty",[106,4134,331],{"style":112},[106,4136,4137],{"style":140},"\"dirty\"",[106,4139,4140],{"style":120}," :touched",[106,4142,331],{"style":112},[106,4144,4145],{"style":140},"\"touched\"",[106,4147,124],{"style":112},[106,4149,4150,4152,4154,4157,4159],{"class":108,"style":109},[106,4151,188],{"style":112},[106,4153,201],{"style":116},[106,4155,4156],{"style":112},">Username\u003C\u002F",[106,4158,201],{"style":116},[106,4160,124],{"style":112},[106,4162,4163,4165,4167],{"class":108,"style":109},[106,4164,188],{"style":112},[106,4166,220],{"style":116},[106,4168,124],{"style":112},[106,4170,4171],{"class":108,"style":109},[106,4172,4173],{"style":112},"      May appear where you contribute or are mentioned. Remove it any time.",[106,4175,4176,4178,4180],{"class":108,"style":109},[106,4177,236],{"style":112},[106,4179,220],{"style":116},[106,4181,124],{"style":112},[106,4183,4185,4187],{"class":4184,"style":109},[108,1038],[106,4186,188],{"style":112},[106,4188,211],{"style":116},[106,4190,4191,4194,4196],{"class":108,"style":109},[106,4192,4193],{"style":120},"      placeholder",[106,4195,331],{"style":112},[106,4197,4198],{"style":140},"\"e.g. alice132\"",[106,4200,4201,4204,4206],{"class":108,"style":109},[106,4202,4203],{"style":120},"      :value",[106,4205,331],{"style":112},[106,4207,4208],{"style":140},"\"value\"",[106,4210,4211,4214,4216],{"class":108,"style":109},[106,4212,4213],{"style":120},"      @update:value",[106,4215,331],{"style":112},[106,4217,4218],{"style":140},"\"onValueChange\"",[106,4220,4221,4224,4226],{"class":108,"style":109},[106,4222,4223],{"style":120},"      @blur",[106,4225,331],{"style":112},[106,4227,4228],{"style":140},"\"onBlur\"",[106,4230,4231],{"class":108,"style":109},[106,4232,4233],{"style":112},"    \u002F>",[106,4235,4237,4239,4241,4244,4246,4249,4252,4254],{"class":4236,"style":109},[108,1038],[106,4238,188],{"style":112},[106,4240,229],{"style":116},[106,4242,4243],{"style":120}," :match",[106,4245,331],{"style":112},[106,4247,4248],{"style":140},"\"!!error\"",[106,4250,4251],{"style":112},">{{ error }}\u003C\u002F",[106,4253,229],{"style":116},[106,4255,124],{"style":112},[106,4257,4258,4260,4262],{"class":108,"style":109},[106,4259,245],{"style":112},[106,4261,191],{"style":116},[106,4263,124],{"style":112},[106,4265,4266,4268,4270],{"class":108,"style":109},[106,4267,158],{"style":112},[106,4269,171],{"style":116},[106,4271,124],{"style":112},[13,4273,4274,4275,4277,4278,4280,4281,4283,4284,4287,4288,95],{},"When the library orchestrates validation and submission, ",[26,4276,36],{}," is optional. A plain ",[26,4279,40],{}," works. To trigger validation yourself, a template ref on ",[26,4282,36],{}," exposes a ",[26,4285,4286],{},"validate()"," that validates every field, or one of them when passed a field ",[26,4289,263],{},"\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Button } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fbutton'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Field } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Ffield'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Form, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> FormErrors } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fform'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { shallowRef } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> errors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">FormErrors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>({})\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> loading\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> joinWaitlist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">email\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Promise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">FormErrors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> Promise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">resolve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setTimeout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(resolve, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1000\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (email.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">endsWith\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'@example.com'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { email: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'This email is already on the waitlist'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onSubmit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> SubmitEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  event.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">preventDefault\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> email\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> FormData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(event.currentTarget \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> HTMLFormElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'email'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  loading.value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> true\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  errors.value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> joinWaitlist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">String\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(email))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  loading.value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Form\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex w-full max-w-64 flex-col gap-4\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">errors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">errors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">submit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">onSubmit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"email\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex flex-col items-start gap-1\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm font-semibold text-gray-900\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Email<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Control\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"email\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        required\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"you@company.com\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"h-8 w-full rounded-md border border-gray-200 px-2 text-sm font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-gray-950 any-pointer-coarse:text-base\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Error\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm text-red-800\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"submit\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">loading\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"font-inherit m-0 flex h-8 items-center justify-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 text-sm\u002F6 font-normal text-nowrap text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-950 data-disabled:text-gray-500 hover:data-disabled:bg-gray-50\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      Join waitlist\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Form\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Button } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fbutton'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Field } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Ffield'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Form, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> FormErrors } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fform'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { shallowRef } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> serverErrors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">FormErrors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>({})\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> loading\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Stands in for a Nuxt server route posted to from the submit listener.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> submitForm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">formData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> FormData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Promise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">FormErrors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> Promise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">resolve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setTimeout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(resolve, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1000\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> username\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> formData.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'username'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (username \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'admin'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { username: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"'admin' is reserved. Choose another.\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onSubmit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> SubmitEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  event.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">preventDefault\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> formData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> FormData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(event.currentTarget \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> HTMLFormElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  loading.value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> true\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  serverErrors.value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> submitForm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(formData)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  loading.value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Form\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    method\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"POST\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex w-full max-w-64 flex-col gap-4\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">errors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">serverErrors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">submit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">onSubmit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"username\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex flex-col items-start gap-1\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm font-semibold text-gray-900\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Username<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Control\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        required\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"admin\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"e.g. alice132\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"h-8 w-full rounded-md border border-gray-200 px-2 text-sm font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-gray-950 any-pointer-coarse:text-base\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Error\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm text-red-800\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"submit\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">loading\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"font-inherit m-0 flex h-8 items-center justify-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 text-sm\u002F6 font-normal text-nowrap text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-950 data-disabled:text-gray-500 hover:data-disabled:bg-gray-50\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      Claim username\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Form\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Button } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fbutton'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Field } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Ffield'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Form, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> FormErrors } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fform'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { shallowRef } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { z } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'zod'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> schema\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> z.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">object\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  name: z.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">().\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Name is required'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  questionCount: z.coerce\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Count must be a number'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">positive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Count must be a positive number'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">})\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> fields\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  { name: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'name'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Name'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, placeholder: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'My project'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  { name: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'questionCount'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Count'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, placeholder: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'10'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> validate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">formValues\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Record\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">unknown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> FormErrors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> result\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> schema.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">safeParse\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(formValues)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (result.success) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> errors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> FormErrors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">messages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Object.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">entries\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(z.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">flattenError\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(result.error).fieldErrors)) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (messages) errors[name] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> messages\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> errors\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> errors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">FormErrors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>({})\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Form\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex w-full max-w-64 flex-col gap-4\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">errors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">errors\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">form-submit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">formValues\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (errors \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> validate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(formValues))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Root\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"field in fields\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"field.name\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      :name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"field.name\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex flex-col items-start gap-1\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm font-semibold text-gray-900\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{{ field.label }}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Control\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        :placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"field.placeholder\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"h-8 w-full rounded-md border border-gray-200 px-2 text-sm font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-gray-950 any-pointer-coarse:text-base\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Error\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm text-red-800\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"submit\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"font-inherit m-0 flex h-8 items-center justify-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 text-sm\u002F6 font-normal text-nowrap text-gray-900 outline-0 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-950 data-disabled:text-gray-500 hover:data-disabled:bg-gray-50\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      Create\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Form\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1789390078677]