[{"data":1,"prerenderedAt":322},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Finput":3,"component-meta:UiInput":168},{"id":4,"title":5,"body":6,"component":20,"dependsOn":151,"description":153,"emitDescriptions":154,"extension":159,"meta":160,"navigation":161,"order":162,"path":163,"seo":164,"status":165,"stem":166,"__hash__":167},"docs\u002Fdocs\u002Fcomponents\u002Finput.md","Input",{"type":7,"value":8,"toc":139},"minimark",[9,30,35,39,43,47,51,65,68,72,75,79,85,89,100,104,111,117,128,132],[10,11,12,13,17,18,21,22,25,26,29],"p",{},"Поле бере класи з ",[14,15,16],"code",{},"uiFieldStyles"," — спільного контракту, на якому тримаються\nвсі поля бібліотеки. Завдяки цьому ",[14,19,20],{},"UiInput",", ",[14,23,24],{},"UiTextarea"," і ",[14,27,28],{},"UiSelect","\nлишаються однаковими без копіювання довгих рядків класів.",[31,32,34],"h2",{"id":33},"приклад","Приклад",[36,37],"component-preview",{"name":38},"input-basic",[31,40,42],{"id":41},"стани","Стани",[36,44],{"name":45,"stage":46},"input-states","min-h-64",[31,48,50],{"id":49},"очищення-та-пароль","Очищення та пароль",[10,52,53,56,57,60,61,64],{},[14,54,55],{},"clearable"," додає хрестик, коли поле не порожнє; ",[14,58,59],{},"passwordToggle"," — око\nдля ",[14,62,63],{},"type=\"password\"",". Обидві кнопки живуть усередині поля, тож відступ\nтексту рахується автоматично і не наїжджає на них.",[36,66],{"name":67},"input-actions",[31,69,71],{"id":70},"api","API",[73,74],"component-api",{},[31,76,78],{"id":77},"коли-використовувати","Коли використовувати",[10,80,81,82,84],{},"Для будь-якого однорядкового введення. Для багаторядкового — ",[14,83,24],{},".",[31,86,88],{"id":87},"коли-не-використовувати","Коли НЕ використовувати",[10,90,91,92,95,96,99],{},"Не ставте поле без ",[14,93,94],{},"label",". ",[14,97,98],{},"placeholder"," замість лейбла зникає при першому\nж символі, і користувач більше не бачить, що саме він заповнює.",[31,101,103],{"id":102},"доступність","Доступність",[10,105,106,107,110],{},"Окремого булевого прапорця помилки немає навмисно: стан вмикає сама\nнаявність тексту в ",[14,108,109],{},"error",". Так неможливо отримати червоне поле без\nпояснення чому.",[10,112,113,116],{},[14,114,115],{},"aria-describedby"," вказує рівно на один активний опис. Якби туди потрапляли\nі підказка, і помилка одночасно, скрінрідер зачитав би інструкцію, яку\nкористувач щойно порушив, раніше за причину відмови.",[10,118,119,120,123,124,127],{},"Мобільні розміри довші за десктопні (",[14,121,122],{},"h-12"," → ",[14,125,126],{},"md:h-9",", 45px за кореня\n15px): нижче 44px палець промахується, а текст 16px не дає iOS Safari\nзумувати сторінку при фокусі.",[31,129,131],{"id":130},"портування","Портування",[10,133,134,135,138],{},"Разом із компонентом копіюйте ",[14,136,137],{},"uiFieldStyles.ts"," — без нього поле лишиться\nбез стилів.",{"title":140,"searchDepth":141,"depth":141,"links":142},"",2,[143,144,145,146,147,148,149,150],{"id":33,"depth":141,"text":34},{"id":41,"depth":141,"text":42},{"id":49,"depth":141,"text":50},{"id":70,"depth":141,"text":71},{"id":77,"depth":141,"text":78},{"id":87,"depth":141,"text":88},{"id":102,"depth":141,"text":103},{"id":130,"depth":141,"text":131},[152],"app\u002Futils\u002FuiFieldStyles.ts","Текстове поле з лейблом, підказкою та станом помилки.",{"update:modelValue":155,"focus":156,"blur":157,"clear":158},"Зміна значення. Для `type=\"number\"` порожнє поле віддає `null`, а не `NaN`.","Поле отримало фокус.","Поле втратило фокус.","Натиснуто кнопку очищення (`clearable`). Значення вже скинуто через `update:modelValue`.","md",{},true,10,"\u002Fdocs\u002Fcomponents\u002Finput",{"title":5,"description":153},"stable","docs\u002Fcomponents\u002Finput","kNWvuIRQKnNgwtJtP8EpPXO6yILFyeZT7YKYa5eUtPo",{"mode":169,"prefetch":170,"preload":170,"filePath":171,"declarationPath":172,"pascalName":20,"kebabName":173,"chunkName":174,"priority":175,"_scanned":161,"meta":176},"all",false,"app\u002Fcomponents\u002Fui\u002FUiInput.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiInput.vue","ui-input","components\u002Fui-input",1,{"type":175,"props":177,"slots":263,"events":273,"exposed":308,"hash":321},[178,193,203,212,215,217,220,224,228,232,235,243,248,253,258],{"name":179,"global":170,"default":180,"description":181,"tags":182,"required":170,"type":183,"schema":184},"type","\"text\"","Тип нативного поля. Впливає і на екранну клавіатуру телефона, і на\nавтозаповнення браузера.",[],"\"number\" | \"text\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\"",{"kind":185,"type":183,"schema":186},"enum",{"0":187,"1":180,"2":188,"3":189,"4":190,"5":191,"6":192},"\"number\"","\"email\"","\"password\"","\"search\"","\"tel\"","\"url\"",{"name":194,"global":170,"default":195,"description":196,"tags":197,"required":170,"type":198,"schema":199},"size","\"md\"","Висота поля. На мобільному кожен розмір вищий за десктопний.",[],"FieldSize",{"kind":185,"type":198,"schema":200},{"0":195,"1":201,"2":202},"\"sm\"","\"lg\"",{"name":204,"global":170,"description":205,"tags":206,"required":170,"type":207,"schema":208},"modelValue","Значення поля. Використовуйте через `v-model`.",[],"string | number",{"kind":185,"type":207,"schema":209},{"0":210,"1":211},"string","number",{"name":94,"global":170,"description":213,"tags":214,"required":170,"type":210,"schema":210},"Видимий лейбл. Пов'язується з полем через `for`\u002F`id` автоматично.",[],{"name":98,"global":170,"description":140,"tags":216,"required":170,"type":210,"schema":210},[],{"name":109,"global":170,"description":218,"tags":219,"required":170,"type":210,"schema":210},"Текст помилки. Сама його наявність вмикає стан помилки — окремого\nбулевого прапорця немає навмисно, щоб не було стану «червоне поле\nбез пояснення чому».",[],{"name":221,"global":170,"description":222,"tags":223,"required":170,"type":210,"schema":210},"hint","Підказка під полем. Ховається, коли показано помилку.",[],{"name":225,"global":170,"description":226,"tags":227,"required":170,"type":210,"schema":210},"autocomplete","Значення нативного `autocomplete`. Без нього браузер не підставить\nзбережені дані.",[],{"name":229,"global":170,"description":230,"tags":231,"required":170,"type":210,"schema":210},"id","Стабільний DOM id. `name` використовується лише для форми.",[],{"name":233,"global":170,"description":140,"tags":234,"required":170,"type":210,"schema":210},"name",[],{"name":236,"global":170,"description":140,"tags":237,"required":170,"type":238,"schema":239},"disabled",[],"boolean",{"kind":185,"type":238,"schema":240},{"0":241,"1":242},"false","true",{"name":244,"global":170,"description":140,"tags":245,"required":170,"type":238,"schema":246},"readonly",[],{"kind":185,"type":238,"schema":247},{"0":241,"1":242},{"name":249,"global":170,"description":140,"tags":250,"required":170,"type":238,"schema":251},"required",[],{"kind":185,"type":238,"schema":252},{"0":241,"1":242},{"name":55,"global":170,"description":254,"tags":255,"required":170,"type":238,"schema":256},"Кнопка очищення праворуч, коли поле не порожнє. Не потрапляє в Tab —\nз клавіатури поле чистять Ctrl+A і Backspace, а зайва зупинка в\nкожному полі форми лише подовжує обхід.",[],{"kind":185,"type":238,"schema":257},{"0":241,"1":242},{"name":59,"global":170,"description":259,"tags":260,"required":170,"type":238,"schema":261},"Для `type=\"password\"`: кнопка «показати пароль». На відміну від\nкнопки очищення, ДОСТУПНА з клавіатури — це самостійна дія, без якої\nкористувач не може перевірити, що набрав.",[],{"kind":185,"type":238,"schema":262},{"0":241,"1":242},[264,269],{"name":265,"type":266,"description":267,"tags":268,"schema":266},"leading","any","Іконка або кнопка ліворуч усередині поля.",[],{"name":270,"type":266,"description":271,"tags":272,"schema":266},"trailing","Іконка або кнопка праворуч усередині поля.",[],[274,282,294,302],{"name":275,"description":140,"tags":276,"type":277,"signature":278,"schema":279},"update:modelValue",[],"[value: string | number]","(event: \"update:modelValue\", value: string | number): void",[280],{"kind":185,"type":207,"schema":281},[210,211],{"name":283,"description":140,"tags":284,"type":285,"signature":286,"schema":287},"focus",[],"[event: FocusEvent]","(event: \"focus\", event: FocusEvent): void",[288],{"kind":289,"type":290,"schema":291},"object","FocusEvent",{"name":179,"global":170,"description":292,"tags":293,"required":161,"type":210,"schema":210},"The **`type`** read-only property of the Event interface returns a string containing the event's type.\n\n[MDN Reference](https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FAPI\u002FEvent\u002Ftype)",[],{"name":295,"description":140,"tags":296,"type":285,"signature":297,"schema":298},"blur",[],"(event: \"blur\", event: FocusEvent): void",[299],{"kind":289,"type":290,"schema":300},{"name":179,"global":170,"description":292,"tags":301,"required":161,"type":210,"schema":210},[],{"name":303,"description":140,"tags":304,"type":305,"signature":306,"schema":307},"clear",[],"[]","(event: \"clear\"): void",[],[309,316],{"name":283,"type":310,"description":311,"tags":312,"schema":313},"() => void","Ставить фокус на поле.",[],{"kind":314,"type":315},"event","(): void",{"name":317,"type":310,"description":318,"tags":319,"schema":320},"select","Виділяє весь текст.",[],{"kind":314,"type":315},"mmYTv4BvsKSIEbiuwDjWx_EVnARJRi73r503rOGcts8",1789660506376]