[{"data":1,"prerenderedAt":421},["ShallowReactive",2],{"docs:input":3,"demo:input\u002Fhero":420},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,110,114,161,165,282,318,332],[8,9,11],"h1",{"id":10},"input","Input",[13,14,15],"p",{},"A text entry field.",[17,18],"demo",{"name":19},"input\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],"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}," { Input } ",[36,66,67],{"style":60},"from",[36,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Finput'",[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,99],{"class":38,"style":39},[36,95,96],{"style":42},"  \u003C",[36,98,11],{"style":46},[36,100,101],{"style":42}," \u002F>",[36,103,104,106,108],{"class":38,"style":39},[36,105,76],{"style":42},[36,107,89],{"style":46},[36,109,54],{"style":42},[21,111,113],{"id":112},"usage-guidelines","Usage guidelines",[115,116,117,139],"ul",{},[118,119,120,124,125,128,129,132,133,138],"li",{},[121,122,123],"strong",{},"Form controls must have an accessible name",": give the input a ",[32,126,127],{},"\u003Clabel>"," element, or wrap it in the ",[32,130,131],{},"Field"," parts. See the ",[134,135,137],"a",{"href":136},"\u002Fforms","forms guide",".",[118,140,141,149,150,153,154,157,158,138],{},[121,142,143,145,146],{},[32,144,11],{}," is ",[32,147,148],{},"Field.Control"," under a shorter import: inside a ",[32,151,152],{},"\u003CField.Root>"," it picks up the label association, validation state and error bindings documented in ",[134,155,131],{"href":156},"\u002Ffield",". Outside one it is a plain ",[32,159,160],{},"\u003Cinput>",[21,162,164],{"id":163},"api-reference","API reference",[166,167],"table",{"columns":168,"rows":172},[169,170,171],"Prop","Type","Default",[173,185,196,205,215,224,234,244,255,264,273],{"summary":174,"detail":178},[175,176,177],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>'input' | 'textarea'\u003C\u002Fcode>","\u003Ccode>'input'\u003C\u002Fcode>",[179,180,181,182],{"label":169,"html":175},{"label":170,"html":176},{"label":171,"html":177},{"label":183,"html":184},"Description","HTML element to render.",{"summary":186,"detail":190},[187,188,189],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[191,192,193,194],{"label":169,"html":187},{"label":170,"html":188},{"label":171,"html":189},{"label":183,"html":195},"CSS class applied to the element.",{"summary":197,"detail":199},[198,188,189],"\u003Ccode>style\u003C\u002Fcode>",[200,201,202,203],{"label":169,"html":198},{"label":170,"html":188},{"label":171,"html":189},{"label":183,"html":204},"Inline style applied to the element.",{"summary":206,"detail":209},[207,188,208],"\u003Ccode>id\u003C\u002Fcode>","auto",[210,211,212,213],{"label":169,"html":207},{"label":170,"html":188},{"label":171,"html":208},{"label":183,"html":214},"Custom element ID. \u003Ccode>Field.Label\u003C\u002Fcode> links to it.",{"summary":216,"detail":218},[217,188,189],"\u003Ccode>name\u003C\u002Fcode>",[219,220,221,222],{"label":169,"html":217},{"label":170,"html":188},{"label":171,"html":189},{"label":183,"html":223},"Form field name. Overridden by \u003Ccode>Field.Root\u003C\u002Fcode> \u003Ccode>name\u003C\u002Fcode>.",{"summary":225,"detail":228},[226,227,189],"\u003Ccode>value\u003C\u002Fcode>","\u003Ccode>string | number | string[]\u003C\u002Fcode>",[229,230,231,232],{"label":169,"html":226},{"label":170,"html":227},{"label":171,"html":189},{"label":183,"html":233},"The input's value (use \u003Ccode>v-model:value\u003C\u002Fcode>).",{"summary":235,"detail":238},[236,237,189],"\u003Ccode>update:value\u003C\u002Fcode>","\u003Ccode>(value: string) => void\u003C\u002Fcode>",[239,240,241,242],{"label":169,"html":236},{"label":170,"html":237},{"label":171,"html":189},{"label":183,"html":243},"Emitted with the new value on every input event.",{"summary":245,"detail":249},[246,247,248],"\u003Ccode>disabled\u003C\u002Fcode>","\u003Ccode>boolean\u003C\u002Fcode>","\u003Ccode>false\u003C\u002Fcode>",[250,251,252,253],{"label":169,"html":246},{"label":170,"html":247},{"label":171,"html":248},{"label":183,"html":254},"Disables the input. Also disabled when \u003Ccode>Field.Root\u003C\u002Fcode> is disabled.",{"summary":256,"detail":258},[257,247,248],"\u003Ccode>autofocus\u003C\u002Fcode>",[259,260,261,262],{"label":169,"html":257},{"label":170,"html":247},{"label":171,"html":248},{"label":183,"html":263},"Focuses the input on mount.",{"summary":265,"detail":267},[266,188,189],"\u003Ccode>aria-labelledby\u003C\u002Fcode>",[268,269,270,271],{"label":169,"html":266},{"label":170,"html":188},{"label":171,"html":189},{"label":183,"html":272},"Accessible name IDs. Replaces the \u003Ccode>Field.Label\u003C\u002Fcode> association when set.",{"summary":274,"detail":276},[275,188,189],"\u003Ccode>aria-describedby\u003C\u002Fcode>",[277,278,279,280],{"label":169,"html":275},{"label":170,"html":188},{"label":171,"html":189},{"label":183,"html":281},"Description IDs; merged with the field's description and error IDs.",[13,283,284,285,287,288,291,292,291,295,291,298,301,302,287,305,291,308,291,311,314,315,138],{},"Other standard ",[32,286,160],{}," props (",[32,289,290],{},"type",", ",[32,293,294],{},"required",[32,296,297],{},"pattern",[32,299,300],{},"placeholder",", etc.) pass through, as\ndo ",[32,303,304],{},"\u003Ctextarea>",[32,306,307],{},"rows",[32,309,310],{},"cols",[32,312,313],{},"wrap",") when ",[32,316,317],{},"as=\"textarea\"",[13,319,320,321,323,324,327,328,331],{},"Outside a ",[32,322,152],{}," only ",[32,325,326],{},"data-disabled"," and a forwarded ",[32,329,330],{},"aria-describedby"," are emitted.",[166,333,334,347],{},[335,336,337],"thead",{},[338,339,340,345],"tr",{},[341,342,344],"th",{"style":343},"text-align:left","Attribute",[341,346,183],{"style":343},[348,349,350,360,370,380,390,400,410],"tbody",{},[338,351,352,357],{},[353,354,355],"td",{"style":343},[32,356,326],{},[353,358,359],{"style":343},"Present when the field or the input is disabled.",[338,361,362,367],{},[353,363,364],{"style":343},[32,365,366],{},"data-touched",[353,368,369],{"style":343},"Present when the field has been touched.",[338,371,372,377],{},[353,373,374],{"style":343},[32,375,376],{},"data-dirty",[353,378,379],{"style":343},"Present when the field's value has changed.",[338,381,382,387],{},[353,383,384],{"style":343},[32,385,386],{},"data-filled",[353,388,389],{"style":343},"Present when the field is filled.",[338,391,392,397],{},[353,393,394],{"style":343},[32,395,396],{},"data-focused",[353,398,399],{"style":343},"Present when the field control is focused.",[338,401,402,407],{},[353,403,404],{"style":343},[32,405,406],{},"data-valid",[353,408,409],{"style":343},"Present when the field is valid.",[338,411,412,417],{},[353,413,414],{"style":343},[32,415,416],{},"data-invalid",[353,418,419],{"style":343},"Present when the field is invalid.","\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\"> { Input } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Finput'\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\">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\">\"flex flex-col items-start gap-1 text-sm font-semibold text-gray-900\"\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\">    Title\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\">Input\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. Design Systems\"\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-64 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\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">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\"><\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>",1789390076057]