[{"data":1,"prerenderedAt":395},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fform-field":3,"component-meta:UiFormField":315},{"id":4,"title":5,"body":6,"component":38,"dependsOn":302,"description":305,"emitDescriptions":306,"extension":307,"meta":308,"navigation":309,"order":161,"path":310,"seo":311,"status":312,"stem":313,"__hash__":314},"docs\u002Fdocs\u002Fcomponents\u002Fform-field.md","FormField",{"type":7,"value":8,"toc":295},"minimark",[9,44,49,54,57,102,187,191,194,198,226,230,246,250,260,284,291],[10,11,12,13,17,18,17,21,24,25,17,28,31,32,35,36,39,40,43],"p",{},"Поля бібліотеки (",[14,15,16],"code",{},"UiInput",", ",[14,19,20],{},"UiSelect",[14,22,23],{},"UiTextarea","…) мають власні\n",[14,26,27],{},"label",[14,29,30],{},"hint"," і ",[14,33,34],{},"error",". ",[14,37,38],{},"UiFormField"," дає ту саму обв'язку контролам, у\nяких її немає: сегментному перемикачу, нативному ",[14,41,42],{},"\u003Cinput type=\"color\">",",\nсторонньому віджету чи власному полю.",[45,46],"component-preview",{"name":47,"stage":48},"form-field-basic","min-h-80",[50,51,53],"h2",{"id":52},"як-привязати-контрол","Як прив'язати контрол",[10,55,56],{},"Слот за замовчуванням отримує все, що треба розкласти на поле:",[58,59,60,71,84,90],"ul",{},[61,62,63,66,67,70],"li",{},[14,64,65],{},"id"," — на нього вказує ",[14,68,69],{},"for"," лейбла;",[61,72,73,76,77,80,81,83],{},[14,74,75],{},"labelId"," — для ",[14,78,79],{},"aria-labelledby",", де ",[14,82,69],{}," не працює (групи, власні\nвіджети);",[61,85,86,89],{},[14,87,88],{},"describedBy"," — опис і рівно один із пари «помилка \u002F підказка»;",[61,91,92,17,95,17,98,101],{},[14,93,94],{},"invalid",[14,96,97],{},"required",[14,99,100],{},"disabled",".",[103,104,109],"pre",{"className":105,"code":106,"language":107,"meta":108,"style":108},"language-vue shiki shiki-themes github-light github-dark","\u003CUiFormField label=\"Колір\" hint=\"HEX або вибір з палітри\" :error=\"error\">\n  \u003Ctemplate #default=\"{ id, describedBy, invalid }\">\n    \u003Cinput :id=\"id\" type=\"color\" :aria-describedby=\"describedBy\" :aria-invalid=\"invalid || undefined\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FUiFormField>\n","vue","",[14,110,111,159,165,171,177],{"__ignoreMap":108},[112,113,116,120,123,127,130,134,137,139,142,145,147,149,152,154,156],"span",{"class":114,"line":115},"line",1,[112,117,119],{"class":118},"sVt8B","\u003C",[112,121,38],{"class":122},"s9eBZ",[112,124,126],{"class":125},"sScJk"," label",[112,128,129],{"class":118},"=",[112,131,133],{"class":132},"sZZnC","\"Колір\"",[112,135,136],{"class":125}," hint",[112,138,129],{"class":118},[112,140,141],{"class":132},"\"HEX або вибір з палітри\"",[112,143,144],{"class":118}," :",[112,146,34],{"class":125},[112,148,129],{"class":118},[112,150,151],{"class":132},"\"",[112,153,34],{"class":118},[112,155,151],{"class":132},[112,157,158],{"class":118},">\n",[112,160,162],{"class":114,"line":161},2,[112,163,164],{"class":118},"  \u003Ctemplate #default=\"{ id, describedBy, invalid }\">\n",[112,166,168],{"class":114,"line":167},3,[112,169,170],{"class":118},"    \u003Cinput :id=\"id\" type=\"color\" :aria-describedby=\"describedBy\" :aria-invalid=\"invalid || undefined\" \u002F>\n",[112,172,174],{"class":114,"line":173},4,[112,175,176],{"class":118},"  \u003C\u002Ftemplate>\n",[112,178,180,183,185],{"class":114,"line":179},5,[112,181,182],{"class":118},"\u003C\u002F",[112,184,38],{"class":122},[112,186,158],{"class":118},[50,188,190],{"id":189},"api","API",[192,193],"component-api",{},[50,195,197],{"id":196},"коли-використовувати","Коли використовувати",[58,199,200,213,220],{},[61,201,202,203,17,206,209,210,212],{},"Контрол без власного лейбла: ",[14,204,205],{},"UiToggleGroup",[14,207,208],{},"UiSlider"," без ",[14,211,27],{},",\nнативні поля, сторонні віджети.",[61,214,215,216,219],{},"Група контролів під одним заголовком — ",[14,217,218],{},"as=\"fieldset\"",": кілька\nчекбоксів, перемикачів.",[61,221,222,223,101],{},"Лейбл із дією праворуч — «Забули пароль?», «Скинути» — через слот\n",[14,224,225],{},"label-aside",[50,227,229],{"id":228},"коли-не-використовувати","Коли НЕ використовувати",[58,231,232,243],{},[61,233,234,235,17,237,239,240,242],{},"Навколо ",[14,236,16],{},[14,238,20],{}," та інших полів із власним ",[14,241,27],{}," — вийде\nдва лейбли й два описи.",[61,244,245],{},"Для макета форми (колонки, відступи між полями) — це звичайна сітка.",[50,247,249],{"id":248},"доступність","Доступність",[10,251,252,255,256,259],{},[14,253,254],{},"aria-describedby"," вказує на ",[14,257,258],{},"description"," і рівно на ОДИН із пари помилка\n\u002F підказка. Обидва одразу — і скрінрідер зачитає інструкцію, яку\nкористувач щойно порушив, раніше за причину відмови (правило дому).",[10,261,262,263,266,267,270,271,275,277,278,280,281,101],{},"У режимі ",[14,264,265],{},"fieldset"," лейбл — ",[14,268,269],{},"\u003Clegend>",", і вона стоїть ",[272,273,274],"strong",{},"першою дитиною",[14,276,265],{},": лише тоді браузер дає групі назву. Вкладена у flex-рядок поруч\nіз ",[14,279,225],{},", вона назвою вже не була б. Тому легенда прихована, а\nвидимий рядок дублює її для ока з ",[14,282,283],{},"aria-hidden",[10,285,286,287,290],{},"Помилка має ",[14,288,289],{},"role=\"alert\""," і з'являється разом із текстом — так само, як у\nвбудованих полях: стан помилки вмикає САМА наявність тексту.",[292,293,294],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":108,"searchDepth":161,"depth":161,"links":296},[297,298,299,300,301],{"id":52,"depth":161,"text":53},{"id":189,"depth":161,"text":190},{"id":196,"depth":161,"text":197},{"id":228,"depth":161,"text":229},{"id":248,"depth":161,"text":249},[303,304],"app\u002Fcomposables\u002FuseUiText.ts","app\u002Futils\u002FuiFieldStyles.ts","Лейбл, опис, підказка й помилка для будь-якого контрола — з тими самими ARIA-зв'язками, що у вбудованих полях.",{},"md",{},true,"\u002Fdocs\u002Fcomponents\u002Fform-field",{"title":5,"description":305},"stable","docs\u002Fcomponents\u002Fform-field","XDmHVA-ph6jBl-fFq4DtKh7cvnkJ9DUX_bCSQFmG7So",{"mode":316,"prefetch":317,"preload":317,"filePath":318,"declarationPath":319,"pascalName":38,"kebabName":320,"chunkName":321,"priority":115,"_scanned":309,"meta":322},"all",false,"app\u002Fcomponents\u002Fui\u002FUiFormField.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiFormField.vue","ui-form-field","components\u002Fui-form-field",{"type":115,"props":323,"slots":361,"events":392,"exposed":393,"hash":394},[324,329,331,334,337,340,350,357],{"name":258,"global":317,"default":325,"description":326,"tags":327,"required":317,"type":328,"schema":328},"undefined","Пояснення під лейблом, над полем — коли без нього поле незрозуміле\n(«Бачать лише адміністратори»). На відміну від `hint`, не ховається\nпри помилці.",[],"string",{"name":27,"global":317,"default":325,"description":108,"tags":330,"required":317,"type":328,"schema":328},[],{"name":30,"global":317,"default":325,"description":332,"tags":333,"required":317,"type":328,"schema":328},"Підказка під полем. Ховається, коли показано помилку.",[],{"name":34,"global":317,"default":325,"description":335,"tags":336,"required":317,"type":328,"schema":328},"Текст помилки. Стан помилки вмикає САМА наявність тексту — як в\nусіх полях бібліотеки.",[],{"name":65,"global":317,"default":325,"description":338,"tags":339,"required":317,"type":328,"schema":328},"id контрола. Лейбл вказує на нього через `for`, тож задавайте його\nсамому полю через слот: `\u003Cinput :id=\"id\">`.",[],{"name":341,"global":317,"default":342,"description":343,"tags":344,"required":317,"type":345,"schema":346},"as","\"div\"","`fieldset` — для групи контролів (кілька чекбоксів, сегментний\nперемикач): лейбл стає `\u003Clegend>`, і скрінрідер оголошує назву групи\nпри вході в будь-який її елемент. `div` — для одного поля.",[],"\"div\" | \"fieldset\"",{"kind":347,"type":345,"schema":348},"enum",{"0":342,"1":349},"\"fieldset\"",{"name":97,"global":317,"default":351,"description":108,"tags":352,"required":317,"type":353,"schema":354},"false",[],"boolean",{"kind":347,"type":353,"schema":355},{"0":351,"1":356},"true",{"name":100,"global":317,"default":351,"description":108,"tags":358,"required":317,"type":353,"schema":359},[],{"kind":347,"type":353,"schema":360},{"0":351,"1":356},[362,388],{"name":363,"type":364,"description":365,"tags":366,"schema":367},"default","FormFieldSlotProps","Сам контрол. Слот отримує все, що треба прив'язати: `id`, `labelId`,\n`describedBy`, `invalid` — розкладайте їх на поле, і зв'язки лейбла,\nпідказки й помилки працюватимуть так само, як у вбудованих полях.",[],{"kind":368,"type":364,"schema":369},"object",{"id":370,"labelId":373,"describedBy":376,"invalid":379,"required":384,"disabled":386},{"name":65,"global":317,"description":371,"tags":372,"required":309,"type":328,"schema":328},"id для самого контрола — на нього вказує `for` лейбла.",[],{"name":75,"global":317,"description":374,"tags":375,"required":309,"type":328,"schema":328},"id лейбла — для `aria-labelledby` там, де `for` не працює.",[],{"name":88,"global":317,"description":377,"tags":378,"required":309,"type":328,"schema":328},"Рівно один опис: помилка, інакше підказка, плюс `description`.",[],{"name":94,"global":317,"description":380,"tags":381,"required":309,"type":353,"schema":382},"Чи є помилка — для `aria-invalid`.",[],{"kind":347,"type":353,"schema":383},{"0":351,"1":356},{"name":97,"global":317,"description":108,"tags":385,"required":309,"type":353,"schema":353},[],{"name":100,"global":317,"description":108,"tags":387,"required":309,"type":353,"schema":353},[],{"name":225,"type":389,"description":390,"tags":391,"schema":389},"any","Праворуч від лейбла: «Забули пароль?», лічильник, «необов'язково».",[],[],[],"FSUTD8et1Rsl5QgiC89vXbmKsg9Ch2C9RfsfJawL_WU",1792004323338]