[{"data":1,"prerenderedAt":348},["ShallowReactive",2],{"docs-nav-pkg":3,"docs-page-pkg-\u002Fpkg\u002Fnumber-field":133},[4,8,12,15,18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,121,124,127,130],{"path":5,"title":6,"section":7},"\u002Fpkg","Overview","Start",{"path":9,"title":10,"section":11},"\u002Fpkg\u002Faccordion","Accordion","Components",{"path":13,"title":14,"section":11},"\u002Fpkg\u002Falert-dialog","Alert Dialog",{"path":16,"title":17,"section":11},"\u002Fpkg\u002Fautocomplete","Autocomplete",{"path":19,"title":20,"section":11},"\u002Fpkg\u002Favatar","Avatar",{"path":22,"title":23,"section":11},"\u002Fpkg\u002Fbutton","Button",{"path":25,"title":26,"section":11},"\u002Fpkg\u002Fcheckbox","Checkbox",{"path":28,"title":29,"section":11},"\u002Fpkg\u002Fcheckbox-group","Checkbox Group",{"path":31,"title":32,"section":11},"\u002Fpkg\u002Fcollapsible","Collapsible",{"path":34,"title":35,"section":11},"\u002Fpkg\u002Fcombobox","Combobox",{"path":37,"title":38,"section":11},"\u002Fpkg\u002Fcontext-menu","Context Menu",{"path":40,"title":41,"section":11},"\u002Fpkg\u002Fdialog","Dialog",{"path":43,"title":44,"section":11},"\u002Fpkg\u002Fdrawer","Drawer",{"path":46,"title":47,"section":11},"\u002Fpkg\u002Ffield","Field",{"path":49,"title":50,"section":11},"\u002Fpkg\u002Ffieldset","Fieldset",{"path":52,"title":53,"section":11},"\u002Fpkg\u002Fform","Form",{"path":55,"title":56,"section":11},"\u002Fpkg\u002Ficon-picker","Icon picker",{"path":58,"title":59,"section":11},"\u002Fpkg\u002Finput","Input",{"path":61,"title":62,"section":11},"\u002Fpkg\u002Fmenu","Menu",{"path":64,"title":65,"section":11},"\u002Fpkg\u002Fmenubar","Menubar",{"path":67,"title":68,"section":11},"\u002Fpkg\u002Fmeter","Meter",{"path":70,"title":71,"section":11},"\u002Fpkg\u002Fnavigation-menu","Navigation Menu",{"path":73,"title":74,"section":11},"\u002Fpkg\u002Fnumber-field","Number Field",{"path":76,"title":77,"section":11},"\u002Fpkg\u002Fotp-field","OTP Field",{"path":79,"title":80,"section":11},"\u002Fpkg\u002Fplot","Plot",{"path":82,"title":83,"section":11},"\u002Fpkg\u002Fpopover","Popover",{"path":85,"title":86,"section":11},"\u002Fpkg\u002Fpreview-card","Preview Card",{"path":88,"title":89,"section":11},"\u002Fpkg\u002Fprogress","Progress",{"path":91,"title":92,"section":11},"\u002Fpkg\u002Fradio-group","Radio Group",{"path":94,"title":95,"section":11},"\u002Fpkg\u002Fscroll-area","Scroll Area",{"path":97,"title":98,"section":11},"\u002Fpkg\u002Fselect","Select",{"path":100,"title":101,"section":11},"\u002Fpkg\u002Fseparator","Separator",{"path":103,"title":104,"section":11},"\u002Fpkg\u002Fsidebar","Sidebar",{"path":106,"title":107,"section":11},"\u002Fpkg\u002Fslider","Slider",{"path":109,"title":110,"section":11},"\u002Fpkg\u002Fswitch","Switch",{"path":112,"title":113,"section":11},"\u002Fpkg\u002Ftabs","Tabs",{"path":115,"title":116,"section":11},"\u002Fpkg\u002Ftoast","Toast",{"path":118,"title":119,"section":120},"\u002Fpkg\u002Fapi","Api","Runtime",{"path":122,"title":123,"section":120},"\u002Fpkg\u002Fauth","Auth",{"path":125,"title":126,"section":120},"\u002Fpkg\u002Fblob","Blob",{"path":128,"title":129,"section":120},"\u002Fpkg\u002Fchannels","Channels",{"path":131,"title":132,"section":120},"\u002Fpkg\u002Fdb","Db",{"id":134,"title":74,"body":135,"description":341,"extension":342,"meta":343,"navigation":344,"path":73,"section":11,"seo":345,"stem":346,"__hash__":347},"pkg\u002Fpkg\u002Fnumber-field.md",{"type":136,"value":137,"toc":337},"minimark",[138,142,145,150,260,264,333],[139,140,141],"p",{},"A numeric input with increment and decrement buttons, and a scrub area. Drag the label sideways to scrub the value. The field and steppers have no border. They rest on the color wash and shift lightness on hover and focus. Outer corners are rounded and the inner edges stay square. The number is Light and the scrub label is Regular.",[143,144],"base-number-field-demo",{},[146,147,149],"h2",{"id":148},"anatomy","Anatomy",[151,152,157],"pre",{"className":153,"code":154,"language":155,"meta":156,"style":156},"language-vue shiki shiki-themes github-light github-dark","\u003CUiNumberFieldRoot :default-value=\"100\">\n  \u003CUiNumberFieldScrubArea>\n    \u003Clabel>Amount\u003C\u002Flabel>\n    \u003CUiNumberFieldScrubAreaCursor \u002F>\n  \u003C\u002FUiNumberFieldScrubArea>\n  \u003CUiNumberFieldGroup>\n    \u003CUiNumberFieldDecrement \u002F>\n    \u003CUiNumberFieldInput \u002F>\n    \u003CUiNumberFieldIncrement \u002F>\n  \u003C\u002FUiNumberFieldGroup>\n\u003C\u002FUiNumberFieldRoot>\n","vue","",[158,159,160,196,202,208,214,220,226,232,238,244,250],"code",{"__ignoreMap":156},[161,162,165,169,173,176,180,183,187,191,193],"span",{"class":163,"line":164},"line",1,[161,166,168],{"class":167},"sVt8B","\u003C",[161,170,172],{"class":171},"s9eBZ","UiNumberFieldRoot",[161,174,175],{"class":167}," :",[161,177,179],{"class":178},"sScJk","default-value",[161,181,182],{"class":167},"=",[161,184,186],{"class":185},"sZZnC","\"",[161,188,190],{"class":189},"sj4cs","100",[161,192,186],{"class":185},[161,194,195],{"class":167},">\n",[161,197,199],{"class":163,"line":198},2,[161,200,201],{"class":167},"  \u003CUiNumberFieldScrubArea>\n",[161,203,205],{"class":163,"line":204},3,[161,206,207],{"class":167},"    \u003Clabel>Amount\u003C\u002Flabel>\n",[161,209,211],{"class":163,"line":210},4,[161,212,213],{"class":167},"    \u003CUiNumberFieldScrubAreaCursor \u002F>\n",[161,215,217],{"class":163,"line":216},5,[161,218,219],{"class":167},"  \u003C\u002FUiNumberFieldScrubArea>\n",[161,221,223],{"class":163,"line":222},6,[161,224,225],{"class":167},"  \u003CUiNumberFieldGroup>\n",[161,227,229],{"class":163,"line":228},7,[161,230,231],{"class":167},"    \u003CUiNumberFieldDecrement \u002F>\n",[161,233,235],{"class":163,"line":234},8,[161,236,237],{"class":167},"    \u003CUiNumberFieldInput \u002F>\n",[161,239,241],{"class":163,"line":240},9,[161,242,243],{"class":167},"    \u003CUiNumberFieldIncrement \u002F>\n",[161,245,247],{"class":163,"line":246},10,[161,248,249],{"class":167},"  \u003C\u002FUiNumberFieldGroup>\n",[161,251,253,256,258],{"class":163,"line":252},11,[161,254,255],{"class":167},"\u003C\u002F",[161,257,172],{"class":171},[161,259,195],{"class":167},[146,261,263],{"id":262},"parts","Parts",[265,266,267,296,306,312,318,324],"ul",{},[268,269,270,274,275,278,279,282,283,282,286,282,289,282,292,295],"li",{},[271,272,273],"strong",{},"Root"," — ",[158,276,277],{},"value"," \u002F ",[158,280,281],{},"defaultValue",", ",[158,284,285],{},"min",[158,287,288],{},"max",[158,290,291],{},"step",[158,293,294],{},"disabled",".",[268,297,298,301,302,305],{},[271,299,300],{},"ScrubArea"," — pointer drag changes the value. ",[158,303,304],{},"ew-resize"," cursor.",[268,307,308,311],{},[271,309,310],{},"ScrubAreaCursor"," — follows the pointer while scrubbing.",[268,313,314,317],{},[271,315,316],{},"Group"," — lays out decrement, input, increment.",[268,319,320,323],{},[271,321,322],{},"Decrement \u002F Increment"," — step the value. Arrow up\u002Fdown on the input do the same.",[268,325,326,328,329,332],{},[271,327,59],{}," — text field with ",[158,330,331],{},"inputmode=\"decimal\"",". Blur clamps to min\u002Fmax.",[334,335,336],"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 pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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":156,"searchDepth":198,"depth":198,"links":338},[339,340],{"id":148,"depth":198,"text":149},{"id":262,"depth":198,"text":263},"A numeric input with increment, decrement, and scrub","md",{},true,{"title":74,"description":341},"pkg\u002Fnumber-field","W78MGlXpFKyIZsdKNwRsOzXBnZtrVu1WcSYMxm6mPb4",1791043755031]