[{"data":1,"prerenderedAt":777},["Reactive",2],{"content-query-8OAUsN8h01":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":772,"_id":773,"_source":774,"_file":775,"_extension":776},"/docs/forms/components/form-error","components",false,"","Form Error - Inkline","Form component used to display form validation errors.",{"type":11,"children":12,"toc":766},"root",[13,22,28,47,67,699,732,740,747,751,757,761],{"type":14,"tag":15,"props":16,"children":18},"element","h1",{"id":17},"form-error",[19],{"type":20,"value":21},"text","Form Error",{"type":14,"tag":23,"props":24,"children":26},"h2",{"id":25},"form-component-used-to-display-form-validation-errors",[27],{"type":20,"value":9},{"type":14,"tag":29,"props":30,"children":31},"content-alert",{},[32],{"type":14,"tag":33,"props":34,"children":35},"p",{},[36,38,45],{"type":20,"value":37},"This component should be used only together with Inkline's ",{"type":14,"tag":39,"props":40,"children":42},"a",{"href":41},"/docs/forms/validation",[43],{"type":20,"value":44},"Form Validation",{"type":20,"value":46}," feature.",{"type":14,"tag":33,"props":48,"children":49},{},[50,52,58,60,65],{"type":20,"value":51},"The Form Error component is used to display form validation errors. Similar to the Form Label component, it connects to a ",{"type":14,"tag":53,"props":54,"children":55},"code-inline",{},[56],{"type":20,"value":57},"schema",{"type":20,"value":59}," field using the ",{"type":14,"tag":53,"props":61,"children":62},{},[63],{"type":20,"value":64},"for",{"type":20,"value":66}," prop.",{"type":14,"tag":68,"props":69,"children":70},"content-tabs",{},[71,80],{"type":14,"tag":72,"props":73,"children":74},"template",{"v-slot:preview":7},[75],{"type":14,"tag":76,"props":77,"children":79},"content-preview",{"src":78},"/stories/forms/validation/schema/error-visibility",[],{"type":14,"tag":72,"props":81,"children":82},{"v-slot:vue":7},[83],{"type":14,"tag":84,"props":85,"children":90},"code",{"className":86,"code":88,"language":89,"meta":7},[87],"language-vue","\u003Cscript lang=\"ts\" setup>\nimport { useForm } from '@inkline/inkline/composables';\n\nconst { schema } = useForm\u003C{\n    input: string;\n}>({\n    input: {\n        validators: [{ name: 'minLength', value: 5 }]\n    }\n});\n\u003C/script>\n\u003Ctemplate>\n    \u003CIForm v-model=\"schema\">\n        \u003CIFormGroup>\n            \u003CIFormLabel for=\"input-with-custom-error-visibility\">\n                Input validated on input\n            \u003C/IFormLabel>\n            \u003CIInput\n                id=\"input-with-custom-error-visibility\"\n                name=\"input\"\n                placeholder=\"Type something..\"\n                :error=\"['invalid']\"\n            />\n            \u003CIFormError for=\"input\" :visible=\"['invalid']\" />\n        \u003C/IFormGroup>\n    \u003C/IForm>\n\u003C/template>\n\n","vue",[91],{"type":14,"tag":92,"props":93,"children":94},"pre",{},[95],{"type":14,"tag":84,"props":96,"children":97},{"__ignoreMap":7},[98,152,186,195,237,270,279,288,317,326,335,352,368,405,423,458,467,484,497,520,542,564,586,595,648,665,682],{"type":14,"tag":99,"props":100,"children":103},"span",{"class":101,"line":102},"line",1,[104,110,116,121,127,132,138,142,147],{"type":14,"tag":99,"props":105,"children":107},{"class":106},"ct-553616",[108],{"type":20,"value":109},"\u003C",{"type":14,"tag":99,"props":111,"children":113},{"class":112},"ct-914029",[114],{"type":20,"value":115},"script",{"type":14,"tag":99,"props":117,"children":118},{"class":106},[119],{"type":20,"value":120}," ",{"type":14,"tag":99,"props":122,"children":124},{"class":123},"ct-762058",[125],{"type":20,"value":126},"lang",{"type":14,"tag":99,"props":128,"children":129},{"class":106},[130],{"type":20,"value":131},"=",{"type":14,"tag":99,"props":133,"children":135},{"class":134},"ct-952708",[136],{"type":20,"value":137},"\"ts\"",{"type":14,"tag":99,"props":139,"children":140},{"class":106},[141],{"type":20,"value":120},{"type":14,"tag":99,"props":143,"children":144},{"class":123},[145],{"type":20,"value":146},"setup",{"type":14,"tag":99,"props":148,"children":149},{"class":106},[150],{"type":20,"value":151},">\n",{"type":14,"tag":99,"props":153,"children":155},{"class":101,"line":154},2,[156,162,167,172,176,181],{"type":14,"tag":99,"props":157,"children":159},{"class":158},"ct-149352",[160],{"type":20,"value":161},"import",{"type":14,"tag":99,"props":163,"children":164},{"class":106},[165],{"type":20,"value":166}," { useForm } ",{"type":14,"tag":99,"props":168,"children":169},{"class":158},[170],{"type":20,"value":171},"from",{"type":14,"tag":99,"props":173,"children":174},{"class":106},[175],{"type":20,"value":120},{"type":14,"tag":99,"props":177,"children":178},{"class":134},[179],{"type":20,"value":180},"'@inkline/inkline/composables'",{"type":14,"tag":99,"props":182,"children":183},{"class":106},[184],{"type":20,"value":185},";\n",{"type":14,"tag":99,"props":187,"children":189},{"class":101,"line":188},3,[190],{"type":14,"tag":99,"props":191,"children":192},{},[193],{"type":20,"value":194},"\n",{"type":14,"tag":99,"props":196,"children":198},{"class":101,"line":197},4,[199,204,209,214,219,223,227,232],{"type":14,"tag":99,"props":200,"children":201},{"class":158},[202],{"type":20,"value":203},"const",{"type":14,"tag":99,"props":205,"children":206},{"class":106},[207],{"type":20,"value":208}," { ",{"type":14,"tag":99,"props":210,"children":212},{"class":211},"ct-617022",[213],{"type":20,"value":57},{"type":14,"tag":99,"props":215,"children":216},{"class":106},[217],{"type":20,"value":218}," } ",{"type":14,"tag":99,"props":220,"children":221},{"class":158},[222],{"type":20,"value":131},{"type":14,"tag":99,"props":224,"children":225},{"class":106},[226],{"type":20,"value":120},{"type":14,"tag":99,"props":228,"children":229},{"class":123},[230],{"type":20,"value":231},"useForm",{"type":14,"tag":99,"props":233,"children":234},{"class":106},[235],{"type":20,"value":236},"\u003C{\n",{"type":14,"tag":99,"props":238,"children":240},{"class":101,"line":239},5,[241,246,252,257,261,266],{"type":14,"tag":99,"props":242,"children":243},{"class":106},[244],{"type":20,"value":245},"    ",{"type":14,"tag":99,"props":247,"children":249},{"class":248},"ct-157101",[250],{"type":20,"value":251},"input",{"type":14,"tag":99,"props":253,"children":254},{"class":158},[255],{"type":20,"value":256},":",{"type":14,"tag":99,"props":258,"children":259},{"class":106},[260],{"type":20,"value":120},{"type":14,"tag":99,"props":262,"children":263},{"class":211},[264],{"type":20,"value":265},"string",{"type":14,"tag":99,"props":267,"children":268},{"class":106},[269],{"type":20,"value":185},{"type":14,"tag":99,"props":271,"children":273},{"class":101,"line":272},6,[274],{"type":14,"tag":99,"props":275,"children":276},{"class":106},[277],{"type":20,"value":278},"}>({\n",{"type":14,"tag":99,"props":280,"children":282},{"class":101,"line":281},7,[283],{"type":14,"tag":99,"props":284,"children":285},{"class":106},[286],{"type":20,"value":287},"    input: {\n",{"type":14,"tag":99,"props":289,"children":291},{"class":101,"line":290},8,[292,297,302,307,312],{"type":14,"tag":99,"props":293,"children":294},{"class":106},[295],{"type":20,"value":296},"        validators: [{ name: ",{"type":14,"tag":99,"props":298,"children":299},{"class":134},[300],{"type":20,"value":301},"'minLength'",{"type":14,"tag":99,"props":303,"children":304},{"class":106},[305],{"type":20,"value":306},", value: ",{"type":14,"tag":99,"props":308,"children":309},{"class":211},[310],{"type":20,"value":311},"5",{"type":14,"tag":99,"props":313,"children":314},{"class":106},[315],{"type":20,"value":316}," }]\n",{"type":14,"tag":99,"props":318,"children":320},{"class":101,"line":319},9,[321],{"type":14,"tag":99,"props":322,"children":323},{"class":106},[324],{"type":20,"value":325},"    }\n",{"type":14,"tag":99,"props":327,"children":329},{"class":101,"line":328},10,[330],{"type":14,"tag":99,"props":331,"children":332},{"class":106},[333],{"type":20,"value":334},"});\n",{"type":14,"tag":99,"props":336,"children":338},{"class":101,"line":337},11,[339,344,348],{"type":14,"tag":99,"props":340,"children":341},{"class":106},[342],{"type":20,"value":343},"\u003C/",{"type":14,"tag":99,"props":345,"children":346},{"class":112},[347],{"type":20,"value":115},{"type":14,"tag":99,"props":349,"children":350},{"class":106},[351],{"type":20,"value":151},{"type":14,"tag":99,"props":353,"children":355},{"class":101,"line":354},12,[356,360,364],{"type":14,"tag":99,"props":357,"children":358},{"class":106},[359],{"type":20,"value":109},{"type":14,"tag":99,"props":361,"children":362},{"class":112},[363],{"type":20,"value":72},{"type":14,"tag":99,"props":365,"children":366},{"class":106},[367],{"type":20,"value":151},{"type":14,"tag":99,"props":369,"children":371},{"class":101,"line":370},13,[372,377,383,387,392,396,401],{"type":14,"tag":99,"props":373,"children":374},{"class":106},[375],{"type":20,"value":376},"    \u003C",{"type":14,"tag":99,"props":378,"children":380},{"class":379},"ct-028869",[381],{"type":20,"value":382},"IForm",{"type":14,"tag":99,"props":384,"children":385},{"class":106},[386],{"type":20,"value":120},{"type":14,"tag":99,"props":388,"children":389},{"class":123},[390],{"type":20,"value":391},"v-model",{"type":14,"tag":99,"props":393,"children":394},{"class":106},[395],{"type":20,"value":131},{"type":14,"tag":99,"props":397,"children":398},{"class":134},[399],{"type":20,"value":400},"\"schema\"",{"type":14,"tag":99,"props":402,"children":403},{"class":106},[404],{"type":20,"value":151},{"type":14,"tag":99,"props":406,"children":408},{"class":101,"line":407},14,[409,414,419],{"type":14,"tag":99,"props":410,"children":411},{"class":106},[412],{"type":20,"value":413},"        \u003C",{"type":14,"tag":99,"props":415,"children":416},{"class":379},[417],{"type":20,"value":418},"IFormGroup",{"type":14,"tag":99,"props":420,"children":421},{"class":106},[422],{"type":20,"value":151},{"type":14,"tag":99,"props":424,"children":426},{"class":101,"line":425},15,[427,432,437,441,445,449,454],{"type":14,"tag":99,"props":428,"children":429},{"class":106},[430],{"type":20,"value":431},"            \u003C",{"type":14,"tag":99,"props":433,"children":434},{"class":379},[435],{"type":20,"value":436},"IFormLabel",{"type":14,"tag":99,"props":438,"children":439},{"class":106},[440],{"type":20,"value":120},{"type":14,"tag":99,"props":442,"children":443},{"class":123},[444],{"type":20,"value":64},{"type":14,"tag":99,"props":446,"children":447},{"class":106},[448],{"type":20,"value":131},{"type":14,"tag":99,"props":450,"children":451},{"class":134},[452],{"type":20,"value":453},"\"input-with-custom-error-visibility\"",{"type":14,"tag":99,"props":455,"children":456},{"class":106},[457],{"type":20,"value":151},{"type":14,"tag":99,"props":459,"children":461},{"class":101,"line":460},16,[462],{"type":14,"tag":99,"props":463,"children":464},{"class":106},[465],{"type":20,"value":466},"                Input validated on input\n",{"type":14,"tag":99,"props":468,"children":470},{"class":101,"line":469},17,[471,476,480],{"type":14,"tag":99,"props":472,"children":473},{"class":106},[474],{"type":20,"value":475},"            \u003C/",{"type":14,"tag":99,"props":477,"children":478},{"class":379},[479],{"type":20,"value":436},{"type":14,"tag":99,"props":481,"children":482},{"class":106},[483],{"type":20,"value":151},{"type":14,"tag":99,"props":485,"children":487},{"class":101,"line":486},18,[488,492],{"type":14,"tag":99,"props":489,"children":490},{"class":106},[491],{"type":20,"value":431},{"type":14,"tag":99,"props":493,"children":494},{"class":379},[495],{"type":20,"value":496},"IInput\n",{"type":14,"tag":99,"props":498,"children":500},{"class":101,"line":499},19,[501,506,511,515],{"type":14,"tag":99,"props":502,"children":503},{"class":106},[504],{"type":20,"value":505},"                ",{"type":14,"tag":99,"props":507,"children":508},{"class":123},[509],{"type":20,"value":510},"id",{"type":14,"tag":99,"props":512,"children":513},{"class":106},[514],{"type":20,"value":131},{"type":14,"tag":99,"props":516,"children":517},{"class":134},[518],{"type":20,"value":519},"\"input-with-custom-error-visibility\"\n",{"type":14,"tag":99,"props":521,"children":523},{"class":101,"line":522},20,[524,528,533,537],{"type":14,"tag":99,"props":525,"children":526},{"class":106},[527],{"type":20,"value":505},{"type":14,"tag":99,"props":529,"children":530},{"class":123},[531],{"type":20,"value":532},"name",{"type":14,"tag":99,"props":534,"children":535},{"class":106},[536],{"type":20,"value":131},{"type":14,"tag":99,"props":538,"children":539},{"class":134},[540],{"type":20,"value":541},"\"input\"\n",{"type":14,"tag":99,"props":543,"children":545},{"class":101,"line":544},21,[546,550,555,559],{"type":14,"tag":99,"props":547,"children":548},{"class":106},[549],{"type":20,"value":505},{"type":14,"tag":99,"props":551,"children":552},{"class":123},[553],{"type":20,"value":554},"placeholder",{"type":14,"tag":99,"props":556,"children":557},{"class":106},[558],{"type":20,"value":131},{"type":14,"tag":99,"props":560,"children":561},{"class":134},[562],{"type":20,"value":563},"\"Type something..\"\n",{"type":14,"tag":99,"props":565,"children":567},{"class":101,"line":566},22,[568,572,577,581],{"type":14,"tag":99,"props":569,"children":570},{"class":106},[571],{"type":20,"value":505},{"type":14,"tag":99,"props":573,"children":574},{"class":123},[575],{"type":20,"value":576},":error",{"type":14,"tag":99,"props":578,"children":579},{"class":106},[580],{"type":20,"value":131},{"type":14,"tag":99,"props":582,"children":583},{"class":134},[584],{"type":20,"value":585},"\"['invalid']\"\n",{"type":14,"tag":99,"props":587,"children":589},{"class":101,"line":588},23,[590],{"type":14,"tag":99,"props":591,"children":592},{"class":106},[593],{"type":20,"value":594},"            />\n",{"type":14,"tag":99,"props":596,"children":598},{"class":101,"line":597},24,[599,603,608,612,616,620,625,629,634,638,643],{"type":14,"tag":99,"props":600,"children":601},{"class":106},[602],{"type":20,"value":431},{"type":14,"tag":99,"props":604,"children":605},{"class":379},[606],{"type":20,"value":607},"IFormError",{"type":14,"tag":99,"props":609,"children":610},{"class":106},[611],{"type":20,"value":120},{"type":14,"tag":99,"props":613,"children":614},{"class":123},[615],{"type":20,"value":64},{"type":14,"tag":99,"props":617,"children":618},{"class":106},[619],{"type":20,"value":131},{"type":14,"tag":99,"props":621,"children":622},{"class":134},[623],{"type":20,"value":624},"\"input\"",{"type":14,"tag":99,"props":626,"children":627},{"class":106},[628],{"type":20,"value":120},{"type":14,"tag":99,"props":630,"children":631},{"class":123},[632],{"type":20,"value":633},":visible",{"type":14,"tag":99,"props":635,"children":636},{"class":106},[637],{"type":20,"value":131},{"type":14,"tag":99,"props":639,"children":640},{"class":134},[641],{"type":20,"value":642},"\"['invalid']\"",{"type":14,"tag":99,"props":644,"children":645},{"class":106},[646],{"type":20,"value":647}," />\n",{"type":14,"tag":99,"props":649,"children":651},{"class":101,"line":650},25,[652,657,661],{"type":14,"tag":99,"props":653,"children":654},{"class":106},[655],{"type":20,"value":656},"        \u003C/",{"type":14,"tag":99,"props":658,"children":659},{"class":379},[660],{"type":20,"value":418},{"type":14,"tag":99,"props":662,"children":663},{"class":106},[664],{"type":20,"value":151},{"type":14,"tag":99,"props":666,"children":668},{"class":101,"line":667},26,[669,674,678],{"type":14,"tag":99,"props":670,"children":671},{"class":106},[672],{"type":20,"value":673},"    \u003C/",{"type":14,"tag":99,"props":675,"children":676},{"class":379},[677],{"type":20,"value":382},{"type":14,"tag":99,"props":679,"children":680},{"class":106},[681],{"type":20,"value":151},{"type":14,"tag":99,"props":683,"children":685},{"class":101,"line":684},27,[686,690,694],{"type":14,"tag":99,"props":687,"children":688},{"class":106},[689],{"type":20,"value":343},{"type":14,"tag":99,"props":691,"children":692},{"class":112},[693],{"type":20,"value":72},{"type":14,"tag":99,"props":695,"children":696},{"class":106},[697],{"type":20,"value":698},">",{"type":14,"tag":33,"props":700,"children":701},{},[702,704,709,711,716,718,723,725,730],{"type":20,"value":703},"By default, error messages are only displayed when the field is ",{"type":14,"tag":53,"props":705,"children":706},{},[707],{"type":20,"value":708},"touched",{"type":20,"value":710},", ",{"type":14,"tag":53,"props":712,"children":713},{},[714],{"type":20,"value":715},"dirty",{"type":20,"value":717},", and ",{"type":14,"tag":53,"props":719,"children":720},{},[721],{"type":20,"value":722},"invalid",{"type":20,"value":724},". You can change the error visibility conditions by using the ",{"type":14,"tag":53,"props":726,"children":727},{},[728],{"type":20,"value":729},"visible",{"type":20,"value":731}," field. The property that can be either an array of string values (multiple conditions), or a simple string (single condition).",{"type":14,"tag":33,"props":733,"children":734},{},[735],{"type":14,"tag":39,"props":736,"children":737},{"href":41},[738],{"type":20,"value":739},"Read more about Form Validation",{"type":14,"tag":741,"props":742,"children":744},"h3",{"id":743},"props",[745],{"type":20,"value":746},"Props",{"type":14,"tag":748,"props":749,"children":750},"content-component-props",{"component":607},[],{"type":14,"tag":741,"props":752,"children":754},{"id":753},"design-tokens",[755],{"type":20,"value":756},"Design Tokens",{"type":14,"tag":758,"props":759,"children":760},"content-component-design-tokens",{"component":607},[],{"type":14,"tag":762,"children":763},"style",[764],{"type":20,"value":765},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}\n.ct-149352{color:#D73A49;}\n.dark-theme .ct-149352{color:#F97583;}\n.ct-617022{color:#005CC5;}\n.dark-theme .ct-617022{color:#79B8FF;}\n.ct-157101{color:#E36209;}\n.dark-theme .ct-157101{color:#FFAB70;}\n.ct-028869{color:#B31D28;font-style:italic;}\n.dark-theme .ct-028869{color:#FDAEB7;font-style:italic;}",{"title":7,"searchDepth":154,"depth":154,"links":767},[768],{"id":25,"depth":154,"text":9,"children":769},[770,771],{"id":743,"depth":188,"text":746},{"id":753,"depth":188,"text":756},"markdown","content:docs:forms:components:form-error.md","content","docs/forms/components/form-error.md","md",1794582260695]