[{"data":1,"prerenderedAt":683},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-checkbox":12,"i-ph:code":679,"i-ph:toggle-right-fill":681},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":673,"meta":674,"navigation":114,"path":675,"seo":676,"stem":677,"__hash__":678},"docs\u002Fdocs\u002Fcomponents\u002Fcheckbox.md","Checkbox",{"type":16,"value":17,"toc":667},"minimark",[18,22,26,428,433,528,532,562,566,626,630,633,663],[19,20,14],"h1",{"id":21},"checkbox",[23,24,25],"p",{},"A checkbox component that supports custom icons, labels, and various states. It can be used as a controlled or uncontrolled component.",[27,28,30],"checkbox-example",{"source-path":29},"Checkbox\u002FCheckbox.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Checkbox } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst checked = ref(true)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCheckbox v-model=\"checked\" label=\"Basic checkbox\" \u002F>\n  \u003CCheckbox v-model=\"checked\" label=\"Disabled checkbox\" disabled \u002F>\n  \u003CCheckbox v-model=\"checked\" label=\"Checked checkbox\" checked \u002F>\n  \u003CCheckbox v-model=\"checked\" accent>\n    \u003Ctemplate #icon-on>\n      \u003CIconToggleLeft \u002F>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate #icon-off>\n      \u003CIconToggleRightFill \u002F>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate #default>\n      Custom icons with \u003Ccode>accent\u003C\u002Fcode> color\n    \u003C\u002Ftemplate>\n  \u003C\u002FCheckbox>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,89,109,116,141,151,156,166,203,236,268,290,306,317,327,341,351,360,374,400,409,419],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":47},">\n",[41,61,63,66,69,72,75,78,82,86],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," Checkbox",[41,73,74],{"class":47}," }",[41,76,77],{"class":51}," from",[41,79,81],{"class":80},"sBR95"," '",[41,83,85],{"class":84},"sfmH-","@dolanske\u002Fvui",[41,87,88],{"class":80},"'\n",[41,90,92,94,96,99,101,103,105,107],{"class":43,"line":91},3,[41,93,65],{"class":51},[41,95,68],{"class":47},[41,97,98],{"class":55}," ref",[41,100,74],{"class":47},[41,102,77],{"class":51},[41,104,81],{"class":80},[41,106,35],{"class":84},[41,108,88],{"class":80},[41,110,112],{"class":43,"line":111},4,[41,113,115],{"emptyLinePlaceholder":114},true,"\n",[41,117,119,123,126,129,132,135,138],{"class":43,"line":118},5,[41,120,122],{"class":121},"sCMWV","const",[41,124,125],{"class":55}," checked",[41,127,128],{"class":47}," =",[41,130,98],{"class":131},"sRTv0",[41,133,134],{"class":47},"(",[41,136,137],{"class":51},"true",[41,139,140],{"class":47},")\n",[41,142,144,147,149],{"class":43,"line":143},6,[41,145,146],{"class":47},"\u003C\u002F",[41,148,52],{"class":51},[41,150,59],{"class":47},[41,152,154],{"class":43,"line":153},7,[41,155,115],{"emptyLinePlaceholder":114},[41,157,159,161,164],{"class":43,"line":158},8,[41,160,48],{"class":47},[41,162,163],{"class":51},"template",[41,165,59],{"class":47},[41,167,169,172,174,177,180,183,186,188,191,193,195,198,200],{"class":43,"line":168},9,[41,170,171],{"class":47},"  \u003C",[41,173,14],{"class":51},[41,175,176],{"class":55}," v-model",[41,178,179],{"class":47},"=",[41,181,182],{"class":80},"\"",[41,184,185],{"class":84},"checked",[41,187,182],{"class":80},[41,189,190],{"class":55}," label",[41,192,179],{"class":47},[41,194,182],{"class":80},[41,196,197],{"class":84},"Basic checkbox",[41,199,182],{"class":80},[41,201,202],{"class":47}," \u002F>\n",[41,204,206,208,210,212,214,216,218,220,222,224,226,229,231,234],{"class":43,"line":205},10,[41,207,171],{"class":47},[41,209,14],{"class":51},[41,211,176],{"class":55},[41,213,179],{"class":47},[41,215,182],{"class":80},[41,217,185],{"class":84},[41,219,182],{"class":80},[41,221,190],{"class":55},[41,223,179],{"class":47},[41,225,182],{"class":80},[41,227,228],{"class":84},"Disabled checkbox",[41,230,182],{"class":80},[41,232,233],{"class":55}," disabled",[41,235,202],{"class":47},[41,237,239,241,243,245,247,249,251,253,255,257,259,262,264,266],{"class":43,"line":238},11,[41,240,171],{"class":47},[41,242,14],{"class":51},[41,244,176],{"class":55},[41,246,179],{"class":47},[41,248,182],{"class":80},[41,250,185],{"class":84},[41,252,182],{"class":80},[41,254,190],{"class":55},[41,256,179],{"class":47},[41,258,182],{"class":80},[41,260,261],{"class":84},"Checked checkbox",[41,263,182],{"class":80},[41,265,125],{"class":55},[41,267,202],{"class":47},[41,269,271,273,275,277,279,281,283,285,288],{"class":43,"line":270},12,[41,272,171],{"class":47},[41,274,14],{"class":51},[41,276,176],{"class":55},[41,278,179],{"class":47},[41,280,182],{"class":80},[41,282,185],{"class":84},[41,284,182],{"class":80},[41,286,287],{"class":55}," accent",[41,289,59],{"class":47},[41,291,293,296,298,301,304],{"class":43,"line":292},13,[41,294,295],{"class":47},"    \u003C",[41,297,163],{"class":51},[41,299,300],{"class":47}," #",[41,302,303],{"class":131},"icon-on",[41,305,59],{"class":47},[41,307,309,312,315],{"class":43,"line":308},14,[41,310,311],{"class":47},"      \u003C",[41,313,314],{"class":51},"IconToggleLeft",[41,316,202],{"class":47},[41,318,320,323,325],{"class":43,"line":319},15,[41,321,322],{"class":47},"    \u003C\u002F",[41,324,163],{"class":51},[41,326,59],{"class":47},[41,328,330,332,334,336,339],{"class":43,"line":329},16,[41,331,295],{"class":47},[41,333,163],{"class":51},[41,335,300],{"class":47},[41,337,338],{"class":131},"icon-off",[41,340,59],{"class":47},[41,342,344,346,349],{"class":43,"line":343},17,[41,345,311],{"class":47},[41,347,348],{"class":51},"IconToggleRightFill",[41,350,202],{"class":47},[41,352,354,356,358],{"class":43,"line":353},18,[41,355,322],{"class":47},[41,357,163],{"class":51},[41,359,59],{"class":47},[41,361,363,365,367,369,372],{"class":43,"line":362},19,[41,364,295],{"class":47},[41,366,163],{"class":51},[41,368,300],{"class":47},[41,370,371],{"class":131},"default",[41,373,59],{"class":47},[41,375,377,381,383,385,388,391,393,395,397],{"class":43,"line":376},20,[41,378,380],{"class":379},"sX1ls","      Custom icons with ",[41,382,48],{"class":47},[41,384,38],{"class":51},[41,386,387],{"class":47},">",[41,389,390],{"class":379},"accent",[41,392,146],{"class":47},[41,394,38],{"class":51},[41,396,387],{"class":47},[41,398,399],{"class":379}," color\n",[41,401,403,405,407],{"class":43,"line":402},21,[41,404,322],{"class":47},[41,406,163],{"class":51},[41,408,59],{"class":47},[41,410,412,415,417],{"class":43,"line":411},22,[41,413,414],{"class":47},"  \u003C\u002F",[41,416,14],{"class":51},[41,418,59],{"class":47},[41,420,422,424,426],{"class":43,"line":421},23,[41,423,146],{"class":47},[41,425,163],{"class":51},[41,427,59],{"class":47},[429,430,432],"h3",{"id":431},"props","Props",[434,435,436,452],"table",{},[437,438,439],"thead",{},[440,441,442,446,449],"tr",{},[443,444,445],"th",{},"Name",[443,447,448],{},"Default",[443,450,451],{},"Type",[453,454,455,476,496,511],"tbody",{},[440,456,457,463,466],{},[458,459,460],"td",{},[38,461,462],{},"label",[458,464,465],{},"—",[458,467,468,471,472,475],{},[38,469,470],{},"string"," ",[473,474],"br",{}," Text label for the checkbox",[440,477,478,483,488],{},[458,479,480],{},[38,481,482],{},"disabled",[458,484,485],{},[38,486,487],{},"false",[458,489,490,471,493,495],{},[38,491,492],{},"boolean",[473,494],{}," Disables the checkbox",[440,497,498,502,504],{},[458,499,500],{},[38,501,185],{},[458,503,465],{},[458,505,506,471,508,510],{},[38,507,492],{},[473,509],{}," Controls the checked state (for controlled usage)",[440,512,513,517,521],{},[458,514,515],{},[38,516,390],{},[458,518,519],{},[38,520,487],{},[458,522,523,471,525,527],{},[38,524,492],{},[473,526],{}," Uses accent color for the checkbox",[429,529,531],{"id":530},"events","Events",[434,533,534,546],{},[437,535,536],{},[440,537,538,540,543],{},[443,539,445],{},[443,541,542],{},"Payload",[443,544,545],{},"Description",[453,547,548],{},[440,549,550,555,559],{},[458,551,552],{},[38,553,554],{},"change",[458,556,557],{},[38,558,492],{},[458,560,561],{},"Emitted when the checkbox state changes",[429,563,565],{"id":564},"slots","Slots",[434,567,568,579],{},[437,569,570],{},[440,571,572,574,577],{},[443,573,445],{},[443,575,576],{},"Accepts",[443,578,545],{},[453,580,581,598,612],{},[440,582,583,587,592],{},[458,584,585],{},[38,586,371],{},[458,588,589],{},[38,590,591],{},"any",[458,593,594,595,597],{},"Content to be displayed as the label (overrides the ",[38,596,462],{}," prop if provided)",[440,599,600,604,609],{},[458,601,602],{},[38,603,303],{},[458,605,606],{},[38,607,608],{},"'ph:check-square-fill'",[458,610,611],{},"Slot which renders when the component is checked",[440,613,614,618,623],{},[458,615,616],{},[38,617,338],{},[458,619,620],{},[38,621,622],{},"'ph:square'",[458,624,625],{},"Slot which renders when the component is not checked",[429,627,629],{"id":628},"tokens","Tokens",[23,631,632],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[434,634,635,646],{},[437,636,637],{},[440,638,639,642,644],{},[443,640,641],{},"Token",[443,643,448],{},[443,645,545],{},[453,647,648],{},[440,649,650,655,660],{},[458,651,652],{},[38,653,654],{},"--vui-checkbox-size",[458,656,657],{},[38,658,659],{},"24px",[458,661,662],{},"Checkbox width and height",[664,665,666],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sCMWV, html code.shiki .sCMWV{--shiki-dark:#CB7676;--shiki-light:#AB5959;--shiki-default:#CB7676}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}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);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":36,"searchDepth":62,"depth":62,"links":668},[669,670,671,672],{"id":431,"depth":91,"text":432},{"id":530,"depth":91,"text":531},{"id":564,"depth":91,"text":565},{"id":628,"depth":91,"text":629},"md",{},"\u002Fdocs\u002Fcomponents\u002Fcheckbox",{"title":14,"description":25},"docs\u002Fcomponents\u002Fcheckbox","Kp0OHyy4n3qHIPAKUYyr4fBboQpCx_-mO1oNF7Q2uJs",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":680},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":682},"\u003Cpath fill=\"currentColor\" d=\"M176 56H80a72 72 0 0 0 0 144h96a72 72 0 0 0 0-144m0 112a40 40 0 1 1 40-40a40 40 0 0 1-40 40\"\u002F>",1782200882500]