[{"data":1,"prerenderedAt":1156},["ShallowReactive",2],{"docs:field":3,"demo:field\u002Fhero":1155},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,175,179,184,191,320,409,413,419,463,532,536,542,640,677,746,749,755,795,863,867,872,912,980,984,989,1040,1047,1135,1139,1142],[8,9,11],"h1",{"id":10},"field","Field",[13,14,15],"p",{},"A control with label and error.",[17,18],"demo",{"name":19},"field\u002Fhero",[21,22,24],"h2",{"id":23},"anatomy","Anatomy",[26,27,31],"pre",{"language":28,"meta":29,"class":30},"vue","title=\"Anatomy\"","shiki shiki-themes github-light github-dark dark:github-dark",[32,33,35,55,56,55,72,55,81,55,83,55,92,55,102,55,113,55,122,55,131,55,140,55,149,55,158,55,167],"code",{"class":34},"language-vue",[36,37,40,44,48,52],"span",{"class":38,"style":39},"line","display: inline",[36,41,43],{"style":42},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[36,45,47],{"style":46},"color:#22863A;--shiki-dark:#85E89D","script",[36,49,51],{"style":50},"color:#6F42C1;--shiki-dark:#B392F0"," setup",[36,53,54],{"style":42},">","\n",[36,57,58,62,65,68],{"class":38,"style":39},[36,59,61],{"style":60},"color:#D73A49;--shiki-dark:#F97583","import",[36,63,64],{"style":42}," { Field } ",[36,66,67],{"style":60},"from",[36,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Ffield'",[36,73,74,77,79],{"class":38,"style":39},[36,75,76],{"style":42},"\u003C\u002F",[36,78,47],{"style":46},[36,80,54],{"style":42},[36,82],{"class":38,"style":39},[36,84,85,87,90],{"class":38,"style":39},[36,86,43],{"style":42},[36,88,89],{"style":46},"template",[36,91,54],{"style":42},[36,93,94,97,100],{"class":38,"style":39},[36,95,96],{"style":42},"  \u003C",[36,98,99],{"style":46},"Field.Root",[36,101,54],{"style":42},[36,103,104,107,110],{"class":38,"style":39},[36,105,106],{"style":42},"    \u003C",[36,108,109],{"style":46},"Field.Label",[36,111,112],{"style":42}," \u002F>",[36,114,115,117,120],{"class":38,"style":39},[36,116,106],{"style":42},[36,118,119],{"style":46},"Field.Control",[36,121,112],{"style":42},[36,123,124,126,129],{"class":38,"style":39},[36,125,106],{"style":42},[36,127,128],{"style":46},"Field.Description",[36,130,112],{"style":42},[36,132,133,135,138],{"class":38,"style":39},[36,134,106],{"style":42},[36,136,137],{"style":46},"Field.Item",[36,139,112],{"style":42},[36,141,142,144,147],{"class":38,"style":39},[36,143,106],{"style":42},[36,145,146],{"style":46},"Field.Error",[36,148,112],{"style":42},[36,150,151,153,156],{"class":38,"style":39},[36,152,106],{"style":42},[36,154,155],{"style":46},"Field.Validity",[36,157,112],{"style":42},[36,159,160,163,165],{"class":38,"style":39},[36,161,162],{"style":42},"  \u003C\u002F",[36,164,99],{"style":46},[36,166,54],{"style":42},[36,168,169,171,173],{"class":38,"style":39},[36,170,76],{"style":42},[36,172,89],{"style":46},[36,174,54],{"style":42},[21,176,178],{"id":177},"api-reference","API reference",[180,181,183],"h3",{"id":182},"api-reference-root","Root",[13,185,186,187,190],{},"Groups a control with its label, description and error.\nRenders a ",[32,188,189],{},"\u003Cdiv>"," element.",[192,193],"table",{"columns":194,"rows":198},[195,196,197],"Prop","Type","Default",[199,211,222,231,240,251,261,272,283,292,301,310],{"summary":200,"detail":204},[201,202,203],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>keyof HTMLElementTagNameMap\u003C\u002Fcode>","\u003Ccode>'div'\u003C\u002Fcode>",[205,206,207,208],{"label":195,"html":201},{"label":196,"html":202},{"label":197,"html":203},{"label":209,"html":210},"Description","HTML element to render.",{"summary":212,"detail":216},[213,214,215],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[217,218,219,220],{"label":195,"html":213},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":221},"CSS class applied to the element.",{"summary":223,"detail":225},[224,214,215],"\u003Ccode>style\u003C\u002Fcode>",[226,227,228,229],{"label":195,"html":224},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":230},"Inline style applied to the element.",{"summary":232,"detail":234},[233,214,215],"\u003Ccode>name\u003C\u002Fcode>",[235,236,237,238],{"label":195,"html":233},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":239},"Identifies the field when the form is submitted. Takes precedence over \u003Ccode>name\u003C\u002Fcode> on the control.",{"summary":241,"detail":245},[242,243,244],"\u003Ccode>validate\u003C\u002Fcode>","\u003Ccode>(value, formValues) => string | string[] | null | Promise<…>\u003C\u002Fcode>","\u003Ccode>() => null\u003C\u002Fcode>",[246,247,248,249],{"label":195,"html":242},{"label":196,"html":243},{"label":197,"html":244},{"label":209,"html":250},"Custom validation. Return an error message, an array of messages, or \u003Ccode>null\u003C\u002Fcode> when the value is valid. Async functions are supported, but they do not hold up submission under \u003Ccode>validationMode="onSubmit"\u003C\u002Fcode>.",{"summary":252,"detail":255},[253,254,215],"\u003Ccode>validationMode\u003C\u002Fcode>","\u003Ccode>'onSubmit' | 'onBlur' | 'onChange'\u003C\u002Fcode>",[256,257,258,259],{"label":195,"html":253},{"label":196,"html":254},{"label":197,"html":215},{"label":209,"html":260},"When the field is validated. Falls back to \u003Ccode>validationMode\u003C\u002Fcode> on the enclosing \u003Ccode><Form>\u003C\u002Fcode>.",{"summary":262,"detail":266},[263,264,265],"\u003Ccode>validationDebounceTime\u003C\u002Fcode>","\u003Ccode>number\u003C\u002Fcode>","\u003Ccode>0\u003C\u002Fcode>",[267,268,269,270],{"label":195,"html":263},{"label":196,"html":264},{"label":197,"html":265},{"label":209,"html":271},"Milliseconds of inactivity to wait before running \u003Ccode>validate\u003C\u002Fcode>. Applies under \u003Ccode>validationMode="onChange"\u003C\u002Fcode>, and under \u003Ccode>validationMode="onSubmit"\u003C\u002Fcode> once a submit has been attempted. Skipped for an empty value.",{"summary":273,"detail":277},[274,275,276],"\u003Ccode>disabled\u003C\u002Fcode>","\u003Ccode>boolean\u003C\u002Fcode>","\u003Ccode>false\u003C\u002Fcode>",[278,279,280,281],{"label":195,"html":274},{"label":196,"html":275},{"label":197,"html":276},{"label":209,"html":282},"Disables the field and every control inside it. An enclosing \u003Ccode>Fieldset.Root\u003C\u002Fcode> disables it too.",{"summary":284,"detail":286},[285,275,215],"\u003Ccode>invalid\u003C\u002Fcode>",[287,288,289,290],{"label":195,"html":285},{"label":196,"html":275},{"label":197,"html":215},{"label":209,"html":291},"Marks the field invalid whatever its native validity says. Useful when an external library owns the validation.",{"summary":293,"detail":295},[294,275,215],"\u003Ccode>dirty\u003C\u002Fcode>",[296,297,298,299],{"label":195,"html":294},{"label":196,"html":275},{"label":197,"html":215},{"label":209,"html":300},"Whether the value has changed from its initial value. Setting it stops the field tracking dirtiness itself.",{"summary":302,"detail":304},[303,275,215],"\u003Ccode>touched\u003C\u002Fcode>",[305,306,307,308],{"label":195,"html":303},{"label":196,"html":275},{"label":197,"html":215},{"label":209,"html":309},"Whether the field has been touched. Setting it stops the field tracking touches itself.",{"summary":311,"detail":314},[312,313,215],"\u003Ccode>default\u003C\u002Fcode>","\u003Ccode>Slot<{ disabled, touched, dirty, valid, filled, focused }>\u003C\u002Fcode>",[315,316,317,318],{"label":195,"html":312},{"label":196,"html":313},{"label":197,"html":215},{"label":209,"html":319},"Content; receives the field state.",[192,321,322,335],{},[323,324,325],"thead",{},[326,327,328,333],"tr",{},[329,330,332],"th",{"style":331},"text-align:left","Attribute",[329,334,209],{"style":331},[336,337,338,349,359,369,379,389,399],"tbody",{},[326,339,340,346],{},[341,342,343],"td",{"style":331},[32,344,345],{},"data-disabled",[341,347,348],{"style":331},"Present when the field is disabled.",[326,350,351,356],{},[341,352,353],{"style":331},[32,354,355],{},"data-touched",[341,357,358],{"style":331},"Present when the field has been touched.",[326,360,361,366],{},[341,362,363],{"style":331},[32,364,365],{},"data-dirty",[341,367,368],{"style":331},"Present when the field's value has changed.",[326,370,371,376],{},[341,372,373],{"style":331},[32,374,375],{},"data-filled",[341,377,378],{"style":331},"Present when the field is filled.",[326,380,381,386],{},[341,382,383],{"style":331},[32,384,385],{},"data-focused",[341,387,388],{"style":331},"Present when the field control is focused.",[326,390,391,396],{},[341,392,393],{"style":331},[32,394,395],{},"data-valid",[341,397,398],{"style":331},"Present when the field is valid.",[326,400,401,406],{},[341,402,403],{"style":331},[32,404,405],{},"data-invalid",[341,407,408],{"style":331},"Present when the field is invalid.",[180,410,412],{"id":411},"api-reference-label","Label",[13,414,415,416,190],{},"An accessible label, associated with the field control automatically.\nRenders a ",[32,417,418],{},"\u003Clabel>",[192,420],{"columns":421,"rows":422},[195,196,197],[423,432,439,446,456],{"summary":424,"detail":426},[201,202,425],"\u003Ccode>'label'\u003C\u002Fcode>",[427,428,429,430],{"label":195,"html":201},{"label":196,"html":202},{"label":197,"html":425},{"label":209,"html":431},"HTML element to render. Any tag other than \u003Ccode>label\u003C\u002Fcode> drops the native \u003Ccode>for\u003C\u002Fcode> association and forwards clicks to the registered control instead — use \u003Ccode>span\u003C\u002Fcode> for \u003Ccode><button>\u003C\u002Fcode>-based controls such as \u003Ccode>Select.Trigger\u003C\u002Fcode>, where native label focus and hover behavior gets in the way.",{"summary":433,"detail":434},[213,214,215],[435,436,437,438],{"label":195,"html":213},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":221},{"summary":440,"detail":441},[224,214,215],[442,443,444,445],{"label":195,"html":224},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":230},{"summary":447,"detail":450},[448,214,449],"\u003Ccode>id\u003C\u002Fcode>","auto",[451,452,453,454],{"label":195,"html":448},{"label":196,"html":214},{"label":197,"html":449},{"label":209,"html":455},"Custom element ID.",{"summary":457,"detail":458},[312,313,215],[459,460,461,462],{"label":195,"html":312},{"label":196,"html":313},{"label":197,"html":215},{"label":209,"html":319},[192,464,465,473],{},[323,466,467],{},[326,468,469,471],{},[329,470,332],{"style":331},[329,472,209],{"style":331},[336,474,475,484,492,500,508,516,524],{},[326,476,477,481],{},[341,478,479],{"style":331},[32,480,345],{},[341,482,483],{"style":331},"Present when the field or item is disabled.",[326,485,486,490],{},[341,487,488],{"style":331},[32,489,355],{},[341,491,358],{"style":331},[326,493,494,498],{},[341,495,496],{"style":331},[32,497,365],{},[341,499,368],{"style":331},[326,501,502,506],{},[341,503,504],{"style":331},[32,505,375],{},[341,507,378],{"style":331},[326,509,510,514],{},[341,511,512],{"style":331},[32,513,385],{},[341,515,388],{"style":331},[326,517,518,522],{},[341,519,520],{"style":331},[32,521,395],{},[341,523,398],{"style":331},[326,525,526,530],{},[341,527,528],{"style":331},[32,529,405],{},[341,531,408],{"style":331},[180,533,535],{"id":534},"api-reference-control","Control",[13,537,538,539,190],{},"The form control to label and validate.\nRenders an ",[32,540,541],{},"\u003Cinput>",[192,543],{"columns":544,"rows":545},[195,196,197],[546,555,562,569,577,585,595,605,613,622,631],{"summary":547,"detail":550},[201,548,549],"\u003Ccode>'input' | 'textarea'\u003C\u002Fcode>","\u003Ccode>'input'\u003C\u002Fcode>",[551,552,553,554],{"label":195,"html":201},{"label":196,"html":548},{"label":197,"html":549},{"label":209,"html":210},{"summary":556,"detail":557},[213,214,215],[558,559,560,561],{"label":195,"html":213},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":221},{"summary":563,"detail":564},[224,214,215],[565,566,567,568],{"label":195,"html":224},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":230},{"summary":570,"detail":571},[448,214,449],[572,573,574,575],{"label":195,"html":448},{"label":196,"html":214},{"label":197,"html":449},{"label":209,"html":576},"Custom element ID. \u003Ccode>Field.Label\u003C\u002Fcode> links to it.",{"summary":578,"detail":579},[233,214,215],[580,581,582,583],{"label":195,"html":233},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":584},"Form field name. Overridden by \u003Ccode>Field.Root\u003C\u002Fcode> \u003Ccode>name\u003C\u002Fcode>.",{"summary":586,"detail":589},[587,588,215],"\u003Ccode>value\u003C\u002Fcode>","\u003Ccode>string | number | string[]\u003C\u002Fcode>",[590,591,592,593],{"label":195,"html":587},{"label":196,"html":588},{"label":197,"html":215},{"label":209,"html":594},"The value of the control (use \u003Ccode>v-model:value\u003C\u002Fcode>).",{"summary":596,"detail":599},[597,598,215],"\u003Ccode>update:value\u003C\u002Fcode>","\u003Ccode>(value: string) => void\u003C\u002Fcode>",[600,601,602,603],{"label":195,"html":597},{"label":196,"html":598},{"label":197,"html":215},{"label":209,"html":604},"Emitted on every input change.",{"summary":606,"detail":607},[274,275,276],[608,609,610,611],{"label":195,"html":274},{"label":196,"html":275},{"label":197,"html":276},{"label":209,"html":612},"Disables the control. Also disabled when \u003Ccode>Field.Root\u003C\u002Fcode> is disabled.",{"summary":614,"detail":616},[615,275,276],"\u003Ccode>autofocus\u003C\u002Fcode>",[617,618,619,620],{"label":195,"html":615},{"label":196,"html":275},{"label":197,"html":276},{"label":209,"html":621},"Whether the control should receive focus on mount.",{"summary":623,"detail":625},[624,214,215],"\u003Ccode>aria-labelledby\u003C\u002Fcode>",[626,627,628,629],{"label":195,"html":624},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":630},"Accessible name IDs. Replaces the \u003Ccode>Field.Label\u003C\u002Fcode> association when set.",{"summary":632,"detail":634},[633,214,215],"\u003Ccode>aria-describedby\u003C\u002Fcode>",[635,636,637,638],{"label":195,"html":633},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":639},"Description IDs; merged with the field's description and error IDs.",[13,641,642,643,645,646,649,650,649,653,649,656,659,660,645,663,649,666,649,669,672,673,676],{},"Other standard ",[32,644,541],{}," props (",[32,647,648],{},"type",", ",[32,651,652],{},"required",[32,654,655],{},"pattern",[32,657,658],{},"placeholder",", etc.) pass through, as\ndo ",[32,661,662],{},"\u003Ctextarea>",[32,664,665],{},"rows",[32,667,668],{},"cols",[32,670,671],{},"wrap",") when ",[32,674,675],{},"as=\"textarea\"",".",[192,678,679,687],{},[323,680,681],{},[326,682,683,685],{},[329,684,332],{"style":331},[329,686,209],{"style":331},[336,688,689,698,706,714,722,730,738],{},[326,690,691,695],{},[341,692,693],{"style":331},[32,694,345],{},[341,696,697],{"style":331},"Present when the field or the control is disabled.",[326,699,700,704],{},[341,701,702],{"style":331},[32,703,355],{},[341,705,358],{"style":331},[326,707,708,712],{},[341,709,710],{"style":331},[32,711,365],{},[341,713,368],{"style":331},[326,715,716,720],{},[341,717,718],{"style":331},[32,719,375],{},[341,721,378],{"style":331},[326,723,724,728],{},[341,725,726],{"style":331},[32,727,385],{},[341,729,388],{"style":331},[326,731,732,736],{},[341,733,734],{"style":331},[32,735,395],{},[341,737,398],{"style":331},[326,739,740,744],{},[341,741,742],{"style":331},[32,743,405],{},[341,745,408],{"style":331},[180,747,209],{"id":748},"api-reference-description",[13,750,751,752,190],{},"Additional information about the field, added to the control's accessible description.\nRenders a ",[32,753,754],{},"\u003Cp>",[192,756],{"columns":757,"rows":758},[195,196,197],[759,767,774,781,788],{"summary":760,"detail":762},[201,202,761],"\u003Ccode>'p'\u003C\u002Fcode>",[763,764,765,766],{"label":195,"html":201},{"label":196,"html":202},{"label":197,"html":761},{"label":209,"html":210},{"summary":768,"detail":769},[213,214,215],[770,771,772,773],{"label":195,"html":213},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":221},{"summary":775,"detail":776},[224,214,215],[777,778,779,780],{"label":195,"html":224},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":230},{"summary":782,"detail":783},[448,214,449],[784,785,786,787],{"label":195,"html":448},{"label":196,"html":214},{"label":197,"html":449},{"label":209,"html":455},{"summary":789,"detail":790},[312,313,215],[791,792,793,794],{"label":195,"html":312},{"label":196,"html":313},{"label":197,"html":215},{"label":209,"html":319},[192,796,797,805],{},[323,798,799],{},[326,800,801,803],{},[329,802,332],{"style":331},[329,804,209],{"style":331},[336,806,807,815,823,831,839,847,855],{},[326,808,809,813],{},[341,810,811],{"style":331},[32,812,345],{},[341,814,483],{"style":331},[326,816,817,821],{},[341,818,819],{"style":331},[32,820,355],{},[341,822,358],{"style":331},[326,824,825,829],{},[341,826,827],{"style":331},[32,828,365],{},[341,830,368],{"style":331},[326,832,833,837],{},[341,834,835],{"style":331},[32,836,375],{},[341,838,378],{"style":331},[326,840,841,845],{},[341,842,843],{"style":331},[32,844,385],{},[341,846,388],{"style":331},[326,848,849,853],{},[341,850,851],{"style":331},[32,852,395],{},[341,854,398],{"style":331},[326,856,857,861],{},[341,858,859],{"style":331},[32,860,405],{},[341,862,408],{"style":331},[180,864,866],{"id":865},"api-reference-item","Item",[13,868,869,870,190],{},"Groups one item of a checkbox or radio group with its own label and description.\nRenders a ",[32,871,189],{},[192,873],{"columns":874,"rows":875},[195,196,197],[876,883,890,897,905],{"summary":877,"detail":878},[201,202,203],[879,880,881,882],{"label":195,"html":201},{"label":196,"html":202},{"label":197,"html":203},{"label":209,"html":210},{"summary":884,"detail":885},[213,214,215],[886,887,888,889],{"label":195,"html":213},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":221},{"summary":891,"detail":892},[224,214,215],[893,894,895,896],{"label":195,"html":224},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":230},{"summary":898,"detail":899},[274,275,276],[900,901,902,903],{"label":195,"html":274},{"label":196,"html":275},{"label":197,"html":276},{"label":209,"html":904},"Disables the checkbox or radio inside the item. A disabled \u003Ccode>Field.Root\u003C\u002Fcode> disables it regardless.",{"summary":906,"detail":907},[312,313,215],[908,909,910,911],{"label":195,"html":312},{"label":196,"html":313},{"label":197,"html":215},{"label":209,"html":319},[192,913,914,922],{},[323,915,916],{},[326,917,918,920],{},[329,919,332],{"style":331},[329,921,209],{"style":331},[336,923,924,932,940,948,956,964,972],{},[326,925,926,930],{},[341,927,928],{"style":331},[32,929,345],{},[341,931,483],{"style":331},[326,933,934,938],{},[341,935,936],{"style":331},[32,937,355],{},[341,939,358],{"style":331},[326,941,942,946],{},[341,943,944],{"style":331},[32,945,365],{},[341,947,368],{"style":331},[326,949,950,954],{},[341,951,952],{"style":331},[32,953,375],{},[341,955,378],{"style":331},[326,957,958,962],{},[341,959,960],{"style":331},[32,961,385],{},[341,963,388],{"style":331},[326,965,966,970],{},[341,967,968],{"style":331},[32,969,395],{},[341,971,398],{"style":331},[326,973,974,978],{},[341,975,976],{"style":331},[32,977,405],{},[341,979,408],{"style":331},[180,981,983],{"id":982},"api-reference-error","Error",[13,985,986,987,190],{},"An error message shown when the field fails validation. While visible, it is part of the control's\naccessible description.\nRenders a ",[32,988,189],{},[192,990],{"columns":991,"rows":992},[195,196,197],[993,1000,1007,1014,1021,1031],{"summary":994,"detail":995},[201,202,203],[996,997,998,999],{"label":195,"html":201},{"label":196,"html":202},{"label":197,"html":203},{"label":209,"html":210},{"summary":1001,"detail":1002},[213,214,215],[1003,1004,1005,1006],{"label":195,"html":213},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":221},{"summary":1008,"detail":1009},[224,214,215],[1010,1011,1012,1013],{"label":195,"html":224},{"label":196,"html":214},{"label":197,"html":215},{"label":209,"html":230},{"summary":1015,"detail":1016},[448,214,449],[1017,1018,1019,1020],{"label":195,"html":448},{"label":196,"html":214},{"label":197,"html":449},{"label":209,"html":455},{"summary":1022,"detail":1025},[1023,1024,215],"\u003Ccode>match\u003C\u002Fcode>","\u003Ccode>boolean | keyof ValidityState\u003C\u002Fcode>",[1026,1027,1028,1029],{"label":195,"html":1023},{"label":196,"html":1024},{"label":197,"html":215},{"label":209,"html":1030},"\u003Ccode>true\u003C\u002Fcode> = always render. \u003Ccode>false\u003C\u002Fcode> or omitted = render when the field is invalid or has a form error, unless the field is disabled. A \u003Ccode>ValidityState\u003C\u002Fcode> key (e.g. \u003Ccode>"valueMissing"\u003C\u002Fcode>) = render only when that native validity flag is set.",{"summary":1032,"detail":1034},[312,1033,215],"\u003Ccode>Slot<{ disabled, touched, dirty, valid, filled, focused, transitionStatus }>\u003C\u002Fcode>",[1035,1036,1037,1038],{"label":195,"html":312},{"label":196,"html":1033},{"label":197,"html":215},{"label":209,"html":1039},"Content; receives the field error state.",[13,1041,1042,1043,1046],{},"Without slot content, the part renders the current error message, or a ",[32,1044,1045],{},"\u003Cul>"," of them when there is\nmore than one.",[192,1048,1049,1057],{},[323,1050,1051],{},[326,1052,1053,1055],{},[329,1054,332],{"style":331},[329,1056,209],{"style":331},[336,1058,1059,1067,1075,1083,1091,1099,1107,1115,1125],{},[326,1060,1061,1065],{},[341,1062,1063],{"style":331},[32,1064,345],{},[341,1066,348],{"style":331},[326,1068,1069,1073],{},[341,1070,1071],{"style":331},[32,1072,355],{},[341,1074,358],{"style":331},[326,1076,1077,1081],{},[341,1078,1079],{"style":331},[32,1080,365],{},[341,1082,368],{"style":331},[326,1084,1085,1089],{},[341,1086,1087],{"style":331},[32,1088,375],{},[341,1090,378],{"style":331},[326,1092,1093,1097],{},[341,1094,1095],{"style":331},[32,1096,385],{},[341,1098,388],{"style":331},[326,1100,1101,1105],{},[341,1102,1103],{"style":331},[32,1104,395],{},[341,1106,398],{"style":331},[326,1108,1109,1113],{},[341,1110,1111],{"style":331},[32,1112,405],{},[341,1114,408],{"style":331},[326,1116,1117,1122],{},[341,1118,1119],{"style":331},[32,1120,1121],{},"data-starting-style",[341,1123,1124],{"style":331},"Present when the error message is animating in.",[326,1126,1127,1132],{},[341,1128,1129],{"style":331},[32,1130,1131],{},"data-ending-style",[341,1133,1134],{"style":331},"Present when the error message is animating out.",[180,1136,1138],{"id":1137},"api-reference-validity","Validity",[13,1140,1141],{},"Renders custom content from the field's validity state.\nDoesn't render its own HTML element.",[192,1143],{"columns":1144,"rows":1145},[195,196,197],[1146],{"summary":1147,"detail":1149},[312,1148,215],"\u003Ccode>Slot<{ validity, error, errors, value, initialValue, transitionStatus }>\u003C\u002Fcode>",[1150,1151,1152,1153],{"label":195,"html":312},{"label":196,"html":1148},{"label":197,"html":215},{"label":209,"html":1154},"Required. Content; receives the field validity state. See \u003Ca href=\"\u002Fforms#showing-the-error\">Showing the error\u003C\u002Fa> for a usage example.","\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\"> { 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:#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\">Field.Root\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 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\">>Group name<\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\">      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\">\"design-team\"\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:#6F42C1;--shiki-dark:#B392F0\"> match\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"valueMissing\"\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\">      Please enter a group name\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.Error\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\">Field.Description\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-gray-600\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      >Shown to everyone in the group<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Field.Description\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\">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\"><\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>",1789390075854]