[{"data":1,"prerenderedAt":922},["ShallowReactive",2],{"docs:checkbox":3,"demo:checkbox\u002Fhero":921},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,130,134,157,161,166,172,260,276,280,294,393,397,405,500,504,508,518,680,832,836,842,886,889],[8,9,11],"h1",{"id":10},"checkbox","Checkbox",[13,14,15],"p",{},"A tri-state checkable control.",[17,18],"demo",{"name":19},"checkbox\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,55,113,55,122],"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}," { Checkbox } ",[36,66,67],{"style":60},"from",[36,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Fcheckbox'",[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,100],{"class":38,"style":39},[36,95,96],{"style":42},"  \u003C",[36,98,99],{"style":46},"Checkbox.Root",[36,101,54],{"style":42},[36,103,104,107,110],{"class":38,"style":39},[36,105,106],{"style":42},"    \u003C",[36,108,109],{"style":46},"Checkbox.Indicator",[36,111,112],{"style":42}," \u002F>",[36,114,115,118,120],{"class":38,"style":39},[36,116,117],{"style":42},"  \u003C\u002F",[36,119,99],{"style":46},[36,121,54],{"style":42},[36,123,124,126,128],{"class":38,"style":39},[36,125,76],{"style":42},[36,127,89],{"style":46},[36,129,54],{"style":42},[21,131,133],{"id":132},"usage-guidelines","Usage guidelines",[135,136,137],"ul",{},[138,139,140,144,145,148,149,152,153,156],"li",{},[141,142,143],"strong",{},"Form controls must have an accessible name",": give the checkbox one by wrapping it in a ",[32,146,147],{},"\u003Clabel>",", or with ",[32,150,151],{},"aria-label"," \u002F ",[32,154,155],{},"aria-labelledby",".",[21,158,160],{"id":159},"examples","Examples",[162,163,165],"h3",{"id":164},"examples-labeling-a-checkbox","Labeling a checkbox",[13,167,168,169,171],{},"The simplest way to name a checkbox is to wrap it in a ",[32,170,147],{},":",[26,173,176],{"language":28,"meta":174,"class":175},"title=\"Wrapping a label around a checkbox\"","shiki shiki-themes github-light github-dark has-highlighted dark:github-dark",[32,177,178,55,186,55,197,55,205,55,214,55,220,55,229,55,238,55,243,55,252],{"class":34},[36,179,180,182,184],{"class":38,"style":39},[36,181,43],{"style":42},[36,183,89],{"style":46},[36,185,54],{"style":42},[36,187,190,192,195],{"class":188,"style":39},[38,189],"highlighted",[36,191,96],{"style":42},[36,193,194],{"style":46},"label",[36,196,54],{"style":42},[36,198,199,201,203],{"class":38,"style":39},[36,200,106],{"style":42},[36,202,99],{"style":46},[36,204,54],{"style":42},[36,206,207,210,212],{"class":38,"style":39},[36,208,209],{"style":42},"      \u003C",[36,211,109],{"style":46},[36,213,54],{"style":42},[36,215,216],{"class":38,"style":39},[36,217,219],{"style":218},"color:#6A737D;--shiki-dark:#6A737D","        \u003C!-- checkmark icon -->",[36,221,222,225,227],{"class":38,"style":39},[36,223,224],{"style":42},"      \u003C\u002F",[36,226,109],{"style":46},[36,228,54],{"style":42},[36,230,231,234,236],{"class":38,"style":39},[36,232,233],{"style":42},"    \u003C\u002F",[36,235,99],{"style":46},[36,237,54],{"style":42},[36,239,240],{"class":38,"style":39},[36,241,242],{"style":42},"    Accept terms and conditions",[36,244,246,248,250],{"class":245,"style":39},[38,189],[36,247,117],{"style":42},[36,249,194],{"style":46},[36,251,54],{"style":42},[36,253,254,256,258],{"class":38,"style":39},[36,255,76],{"style":42},[36,257,89],{"style":46},[36,259,54],{"style":42},[13,261,262,264,265,268,269,271,272,275],{},[32,263,99],{}," renders a ",[32,266,267],{},"\u003Cspan>"," by default so the wrapping ",[32,270,147],{}," toggles the hidden ",[32,273,274],{},"\u003Cinput type=\"checkbox\">"," natively.",[162,277,279],{"id":278},"examples-rendering-as-a-native-button","Rendering as a native button",[13,281,282,283,286,287,290,291,171],{},"When you point a separate label at the checkbox with ",[32,284,285],{},"for","\u002F",[32,288,289],{},"id"," instead of wrapping it, render it as a native button with ",[32,292,293],{},"as=\"button\"",[26,295,297],{"language":28,"meta":296,"class":30},"title=\"Sibling label pattern with a native button\"",[32,298,299,55,307,55,316,55,338,55,361,55,369,55,377,55,385],{"class":34},[36,300,301,303,305],{"class":38,"style":39},[36,302,43],{"style":42},[36,304,89],{"style":46},[36,306,54],{"style":42},[36,308,309,311,314],{"class":38,"style":39},[36,310,96],{"style":42},[36,312,313],{"style":46},"div",[36,315,54],{"style":42},[36,317,318,320,322,325,328,331,334,336],{"class":38,"style":39},[36,319,106],{"style":42},[36,321,194],{"style":46},[36,323,324],{"style":50}," for",[36,326,327],{"style":42},"=",[36,329,330],{"style":70},"\"notifications-checkbox\"",[36,332,333],{"style":42},">Enable notifications\u003C\u002F",[36,335,194],{"style":46},[36,337,54],{"style":42},[36,339,340,342,344,347,349,351,354,356,359],{"class":38,"style":39},[36,341,106],{"style":42},[36,343,99],{"style":46},[36,345,346],{"style":50}," id",[36,348,327],{"style":42},[36,350,330],{"style":70},[36,352,353],{"style":50}," as",[36,355,327],{"style":42},[36,357,358],{"style":70},"\"button\"",[36,360,54],{"style":42},[36,362,363,365,367],{"class":38,"style":39},[36,364,209],{"style":42},[36,366,109],{"style":46},[36,368,112],{"style":42},[36,370,371,373,375],{"class":38,"style":39},[36,372,233],{"style":42},[36,374,99],{"style":46},[36,376,54],{"style":42},[36,378,379,381,383],{"class":38,"style":39},[36,380,117],{"style":42},[36,382,313],{"style":46},[36,384,54],{"style":42},[36,386,387,389,391],{"class":38,"style":39},[36,388,76],{"style":42},[36,390,89],{"style":46},[36,392,54],{"style":42},[162,394,396],{"id":395},"examples-form-integration","Form integration",[13,398,399,404],{},[400,401,403],"a",{"href":402},"\u002Ffield","Field"," wires the label and form association:",[26,406,408],{"language":28,"meta":407,"class":175},"title=\"Using Checkbox in a form\"",[32,409,410,55,418,55,427,55,445,55,454,55,463,55,468,55,476,55,484,55,492],{"class":34},[36,411,412,414,416],{"class":38,"style":39},[36,413,43],{"style":42},[36,415,89],{"style":46},[36,417,54],{"style":42},[36,419,420,422,425],{"class":38,"style":39},[36,421,96],{"style":42},[36,423,424],{"style":46},"Form",[36,426,54],{"style":42},[36,428,430,432,435,438,440,443],{"class":429,"style":39},[38,189],[36,431,106],{"style":42},[36,433,434],{"style":46},"Field.Root",[36,436,437],{"style":50}," name",[36,439,327],{"style":42},[36,441,442],{"style":70},"\"stayLoggedIn\"",[36,444,54],{"style":42},[36,446,447,449,452],{"class":38,"style":39},[36,448,209],{"style":42},[36,450,451],{"style":46},"Field.Label",[36,453,54],{"style":42},[36,455,456,459,461],{"class":38,"style":39},[36,457,458],{"style":42},"        \u003C",[36,460,99],{"style":46},[36,462,112],{"style":42},[36,464,465],{"class":38,"style":39},[36,466,467],{"style":42},"        Stay logged in for 7 days",[36,469,470,472,474],{"class":38,"style":39},[36,471,224],{"style":42},[36,473,451],{"style":46},[36,475,54],{"style":42},[36,477,478,480,482],{"class":38,"style":39},[36,479,233],{"style":42},[36,481,434],{"style":46},[36,483,54],{"style":42},[36,485,486,488,490],{"class":38,"style":39},[36,487,117],{"style":42},[36,489,424],{"style":46},[36,491,54],{"style":42},[36,493,494,496,498],{"class":38,"style":39},[36,495,76],{"style":42},[36,497,89],{"style":46},[36,499,54],{"style":42},[21,501,503],{"id":502},"api-reference","API reference",[162,505,507],{"id":506},"api-reference-root","Root",[13,509,510,511,513,514,517],{},"Represents the checkbox itself.\nRenders a ",[32,512,267],{}," element and a hidden ",[32,515,516],{},"\u003Cinput>"," beside.",[519,520],"table",{"columns":521,"rows":525},[522,523,524],"Prop","Type","Default",[526,538,549,558,568,579,588,597,606,615,624,633,642,651,660,670],{"summary":527,"detail":531},[528,529,530],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>'span' | 'button'\u003C\u002Fcode>","\u003Ccode>'span'\u003C\u002Fcode>",[532,533,534,535],{"label":522,"html":528},{"label":523,"html":529},{"label":524,"html":530},{"label":536,"html":537},"Description","HTML element to render.",{"summary":539,"detail":543},[540,541,542],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[544,545,546,547],{"label":522,"html":540},{"label":523,"html":541},{"label":524,"html":542},{"label":536,"html":548},"CSS class applied to the element.",{"summary":550,"detail":552},[551,541,542],"\u003Ccode>style\u003C\u002Fcode>",[553,554,555,556],{"label":522,"html":551},{"label":523,"html":541},{"label":524,"html":542},{"label":536,"html":557},"Inline style applied to the element.",{"summary":559,"detail":562},[560,541,561],"\u003Ccode>id\u003C\u002Fcode>","auto",[563,564,565,566],{"label":522,"html":560},{"label":523,"html":541},{"label":524,"html":561},{"label":536,"html":567},"ID of the control: the hidden input, or the root itself with \u003Ccode>as="button"\u003C\u002Fcode>. Used for label and field association.",{"summary":569,"detail":573},[570,571,572],"\u003Ccode>checked\u003C\u002Fcode>","\u003Ccode>boolean\u003C\u002Fcode>","\u003Ccode>false\u003C\u002Fcode>",[574,575,576,577],{"label":522,"html":570},{"label":523,"html":571},{"label":524,"html":572},{"label":536,"html":578},"Whether the checkbox is currently ticked. Pass an initial value for uncontrolled use, or \u003Ccode>v-model:checked\u003C\u002Fcode> to control it.",{"summary":580,"detail":582},[581,571,572],"\u003Ccode>indeterminate\u003C\u002Fcode>",[583,584,585,586],{"label":522,"html":581},{"label":523,"html":571},{"label":524,"html":572},{"label":536,"html":587},"Whether the checkbox is in a mixed state: neither ticked, nor unticked.",{"summary":589,"detail":591},[590,571,572],"\u003Ccode>disabled\u003C\u002Fcode>",[592,593,594,595],{"label":522,"html":590},{"label":523,"html":571},{"label":524,"html":572},{"label":536,"html":596},"Whether the component should ignore user interaction.",{"summary":598,"detail":600},[599,571,572],"\u003Ccode>readOnly\u003C\u002Fcode>",[601,602,603,604],{"label":522,"html":599},{"label":523,"html":571},{"label":524,"html":572},{"label":536,"html":605},"Whether the user should be unable to tick or untick the checkbox.",{"summary":607,"detail":609},[608,571,572],"\u003Ccode>required\u003C\u002Fcode>",[610,611,612,613],{"label":522,"html":608},{"label":523,"html":571},{"label":524,"html":572},{"label":536,"html":614},"Whether the user must tick the checkbox before submitting a form.",{"summary":616,"detail":618},[617,541,542],"\u003Ccode>name\u003C\u002Fcode>",[619,620,621,622],{"label":522,"html":617},{"label":523,"html":541},{"label":524,"html":542},{"label":536,"html":623},"Identifies the field when a form is submitted.",{"summary":625,"detail":627},[626,541,542],"\u003Ccode>form\u003C\u002Fcode>",[628,629,630,631],{"label":522,"html":626},{"label":523,"html":541},{"label":524,"html":542},{"label":536,"html":632},"Identifies the form that owns the hidden input. Useful when the checkbox is rendered outside the form.",{"summary":634,"detail":636},[635,541,542],"\u003Ccode>value\u003C\u002Fcode>",[637,638,639,640],{"label":522,"html":635},{"label":523,"html":541},{"label":524,"html":542},{"label":536,"html":641},"The checkbox's value. Identifies it within a Checkbox Group, falling back to \u003Ccode>name\u003C\u002Fcode> when omitted. A checked box submits \u003Ccode>value\u003C\u002Fcode>; with no \u003Ccode>value\u003C\u002Fcode>, it submits the native \u003Ccode>"on"\u003C\u002Fcode>.",{"summary":643,"detail":645},[644,541,542],"\u003Ccode>aria-labelledby\u003C\u002Fcode>",[646,647,648,649],{"label":522,"html":644},{"label":523,"html":541},{"label":524,"html":542},{"label":536,"html":650},"Accessible name for the checkbox.",{"summary":652,"detail":654},[653,541,542],"\u003Ccode>aria-describedby\u003C\u002Fcode>",[655,656,657,658],{"label":522,"html":653},{"label":523,"html":541},{"label":524,"html":542},{"label":536,"html":659},"Additional description IDs; merged with Field message IDs when wrapped in \u003Ccode>Field.Root\u003C\u002Fcode>.",{"summary":661,"detail":664},[662,663,542],"\u003Ccode>update:checked\u003C\u002Fcode>","\u003Ccode>(checked: boolean) => void\u003C\u002Fcode>",[665,666,667,668],{"label":522,"html":662},{"label":523,"html":663},{"label":524,"html":542},{"label":536,"html":669},"Emitted when the checkbox is ticked or unticked.",{"summary":671,"detail":674},[672,673,542],"\u003Ccode>default\u003C\u002Fcode>","\u003Ccode>Slot<{ touched, dirty, filled, focused, valid, checked, disabled, readOnly, required, indeterminate }>\u003C\u002Fcode>",[675,676,677,678],{"label":522,"html":672},{"label":523,"html":673},{"label":524,"html":542},{"label":536,"html":679},"Content; receives the checkbox state.",[519,681,682,695],{},[683,684,685],"thead",{},[686,687,688,693],"tr",{},[689,690,692],"th",{"style":691},"text-align:left","Attribute",[689,694,536],{"style":691},[696,697,698,709,719,729,739,749,759,772,784,796,808,820],"tbody",{},[686,699,700,706],{},[701,702,703],"td",{"style":691},[32,704,705],{},"data-checked",[701,707,708],{"style":691},"Present when checked (and not indeterminate).",[686,710,711,716],{},[701,712,713],{"style":691},[32,714,715],{},"data-unchecked",[701,717,718],{"style":691},"Present when unchecked (and not indeterminate).",[686,720,721,726],{},[701,722,723],{"style":691},[32,724,725],{},"data-indeterminate",[701,727,728],{"style":691},"Present when indeterminate.",[686,730,731,736],{},[701,732,733],{"style":691},[32,734,735],{},"data-disabled",[701,737,738],{"style":691},"Present when disabled.",[686,740,741,746],{},[701,742,743],{"style":691},[32,744,745],{},"data-readonly",[701,747,748],{"style":691},"Present when read-only.",[686,750,751,756],{},[701,752,753],{"style":691},[32,754,755],{},"data-required",[701,757,758],{"style":691},"Present when required.",[686,760,761,766],{},[701,762,763],{"style":691},[32,764,765],{},"data-valid",[701,767,768,769,771],{"style":691},"Present when the field is valid (wrapped in ",[32,770,434],{},").",[686,773,774,779],{},[701,775,776],{"style":691},[32,777,778],{},"data-invalid",[701,780,781,782,771],{"style":691},"Present when the field is invalid (wrapped in ",[32,783,434],{},[686,785,786,791],{},[701,787,788],{"style":691},[32,789,790],{},"data-touched",[701,792,793,794,771],{"style":691},"Present when the field has been touched (wrapped in ",[32,795,434],{},[686,797,798,803],{},[701,799,800],{"style":691},[32,801,802],{},"data-dirty",[701,804,805,806,771],{"style":691},"Present when the value has changed (wrapped in ",[32,807,434],{},[686,809,810,815],{},[701,811,812],{"style":691},[32,813,814],{},"data-filled",[701,816,817,818,771],{"style":691},"Present when checked (wrapped in ",[32,819,434],{},[686,821,822,827],{},[701,823,824],{"style":691},[32,825,826],{},"data-focused",[701,828,829,830,771],{"style":691},"Present when focused (wrapped in ",[32,831,434],{},[162,833,835],{"id":834},"api-reference-indicator","Indicator",[13,837,838,839,841],{},"Indicates whether the checkbox is ticked.\nRenders a ",[32,840,267],{}," element.",[519,843],{"columns":844,"rows":845},[522,523,524],[846,854,861,868,877],{"summary":847,"detail":849},[528,848,530],"\u003Ccode>keyof HTMLElementTagNameMap\u003C\u002Fcode>",[850,851,852,853],{"label":522,"html":528},{"label":523,"html":848},{"label":524,"html":530},{"label":536,"html":537},{"summary":855,"detail":856},[540,541,542],[857,858,859,860],{"label":522,"html":540},{"label":523,"html":541},{"label":524,"html":542},{"label":536,"html":548},{"summary":862,"detail":863},[551,541,542],[864,865,866,867],{"label":522,"html":551},{"label":523,"html":541},{"label":524,"html":542},{"label":536,"html":557},{"summary":869,"detail":871},[870,571,572],"\u003Ccode>keepMounted\u003C\u002Fcode>",[872,873,874,875],{"label":522,"html":870},{"label":523,"html":571},{"label":524,"html":572},{"label":536,"html":876},"Keep in DOM when unchecked (for exit animations).",{"summary":878,"detail":880},[672,879,542],"\u003Ccode>Slot<{ touched, dirty, filled, focused, valid, checked, disabled, readOnly, required, indeterminate, transitionStatus }>\u003C\u002Fcode>",[881,882,883,884],{"label":522,"html":672},{"label":523,"html":879},{"label":524,"html":542},{"label":536,"html":885},"Content; receives the checkbox state plus the indicator's \u003Ccode>transitionStatus\u003C\u002Fcode>.",[13,887,888],{},"Inherits the same data attributes as Root, plus:",[519,890,891,899],{},[683,892,893],{},[686,894,895,897],{},[689,896,692],{"style":691},[689,898,536],{"style":691},[696,900,901,911],{},[686,902,903,908],{},[701,904,905],{"style":691},[32,906,907],{},"data-starting-style",[701,909,910],{"style":691},"Present when the indicator is animating in.",[686,912,913,918],{},[701,914,915],{"style":691},[32,916,917],{},"data-ending-style",[701,919,920],{"style":691},"Present when the indicator is animating out.","\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\"> { Checkbox } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fcheckbox'\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 items-center gap-2 text-sm font-normal 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\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Checkbox.Root\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      checked\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\">\"flex size-4 shrink-0 items-center justify-center rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950 data-checked:bg-gray-900 data-unchecked:border data-unchecked:border-gray-300\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">Checkbox.Indicator\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 text-gray-50 data-unchecked:hidden\"\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\">svg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"true\"\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\">\"size-4\"\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\">path\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"M6 14.15L10.0321 18L18 7\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            stroke\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"currentColor\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            stroke-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"1.5\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            stroke-linecap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"round\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">            stroke-linejoin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"round\"\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\">svg\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\">Checkbox.Indicator\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\">Checkbox.Root\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\">    Remind me to practice daily\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>",1789390071942]