[{"data":1,"prerenderedAt":983},["ShallowReactive",2],{"docs:switch":3,"demo:switch\u002Fhero":982},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,130,134,164,168,172,178,251,267,271,285,384,388,393,507,513,517,521,531,684,826,830,836,870],[8,9,11],"h1",{"id":10},"switch","Switch",[13,14,15],"p",{},"An on\u002Foff form control.",[17,18],"demo",{"name":19},"switch\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}," { Switch } ",[36,66,67],{"style":60},"from",[36,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Fswitch'",[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},"Switch.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},"Switch.Thumb",[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,158,159,163],"li",{},[141,142,143],"strong",{},"Form controls must have an accessible name",": provide a wrapping ",[32,146,147],{},"\u003Clabel>"," (recommended), an ",[32,150,151],{},"aria-label",", or use the ",[154,155,157],"a",{"href":156},"\u002Ffield","Field"," component. See ",[154,160,162],{"href":161},"#examples-labeling-a-switch","Labeling a switch",".",[21,165,167],{"id":166},"examples","Examples",[169,170,162],"h3",{"id":171},"examples-labeling-a-switch",[13,173,174,175,177],{},"The simplest way to name a switch is to wrap it in a ",[32,176,147],{},":",[26,179,182],{"language":28,"meta":180,"class":181},"title=\"Wrapping a label around a switch\"","shiki shiki-themes github-light github-dark has-highlighted dark:github-dark",[32,183,184,55,192,55,203,55,211,55,220,55,229,55,234,55,243],{"class":34},[36,185,186,188,190],{"class":38,"style":39},[36,187,43],{"style":42},[36,189,89],{"style":46},[36,191,54],{"style":42},[36,193,196,198,201],{"class":194,"style":39},[38,195],"highlighted",[36,197,96],{"style":42},[36,199,200],{"style":46},"label",[36,202,54],{"style":42},[36,204,205,207,209],{"class":38,"style":39},[36,206,106],{"style":42},[36,208,99],{"style":46},[36,210,54],{"style":42},[36,212,213,216,218],{"class":38,"style":39},[36,214,215],{"style":42},"      \u003C",[36,217,109],{"style":46},[36,219,112],{"style":42},[36,221,222,225,227],{"class":38,"style":39},[36,223,224],{"style":42},"    \u003C\u002F",[36,226,99],{"style":46},[36,228,54],{"style":42},[36,230,231],{"class":38,"style":39},[36,232,233],{"style":42},"    Autoplay",[36,235,237,239,241],{"class":236,"style":39},[38,195],[36,238,117],{"style":42},[36,240,200],{"style":46},[36,242,54],{"style":42},[36,244,245,247,249],{"class":38,"style":39},[36,246,76],{"style":42},[36,248,89],{"style":46},[36,250,54],{"style":42},[13,252,253,255,256,259,260,262,263,266],{},[32,254,99],{}," renders a ",[32,257,258],{},"\u003Cspan>"," by default so the wrapping ",[32,261,147],{}," toggles the hidden ",[32,264,265],{},"\u003Cinput type=\"checkbox\">"," natively.",[169,268,270],{"id":269},"examples-rendering-as-a-native-button","Rendering as a native button",[13,272,273,274,277,278,281,282,177],{},"When you point a separate label at the switch with ",[32,275,276],{},"for","\u002F",[32,279,280],{},"id"," instead of wrapping it, render it as a native button with ",[32,283,284],{},"as=\"button\"",[26,286,288],{"language":28,"meta":287,"class":30},"title=\"Sibling label pattern with a native button\"",[32,289,290,55,298,55,307,55,329,55,352,55,360,55,368,55,376],{"class":34},[36,291,292,294,296],{"class":38,"style":39},[36,293,43],{"style":42},[36,295,89],{"style":46},[36,297,54],{"style":42},[36,299,300,302,305],{"class":38,"style":39},[36,301,96],{"style":42},[36,303,304],{"style":46},"div",[36,306,54],{"style":42},[36,308,309,311,313,316,319,322,325,327],{"class":38,"style":39},[36,310,106],{"style":42},[36,312,200],{"style":46},[36,314,315],{"style":50}," for",[36,317,318],{"style":42},"=",[36,320,321],{"style":70},"\"wifi-switch\"",[36,323,324],{"style":42},">Wi-Fi\u003C\u002F",[36,326,200],{"style":46},[36,328,54],{"style":42},[36,330,331,333,335,338,340,342,345,347,350],{"class":38,"style":39},[36,332,106],{"style":42},[36,334,99],{"style":46},[36,336,337],{"style":50}," id",[36,339,318],{"style":42},[36,341,321],{"style":70},[36,343,344],{"style":50}," as",[36,346,318],{"style":42},[36,348,349],{"style":70},"\"button\"",[36,351,54],{"style":42},[36,353,354,356,358],{"class":38,"style":39},[36,355,215],{"style":42},[36,357,109],{"style":46},[36,359,112],{"style":42},[36,361,362,364,366],{"class":38,"style":39},[36,363,224],{"style":42},[36,365,99],{"style":46},[36,367,54],{"style":42},[36,369,370,372,374],{"class":38,"style":39},[36,371,117],{"style":42},[36,373,304],{"style":46},[36,375,54],{"style":42},[36,377,378,380,382],{"class":38,"style":39},[36,379,76],{"style":42},[36,381,89],{"style":46},[36,383,54],{"style":42},[169,385,387],{"id":386},"examples-form-integration","Form integration",[13,389,390,392],{},[154,391,157],{"href":156}," wires the label and form association:",[26,394,396],{"language":28,"meta":395,"class":181},"title=\"Using Switch in a form\"",[32,397,398,55,406,55,415,55,433,55,442,55,451,55,460,55,469,55,474,55,483,55,491,55,499],{"class":34},[36,399,400,402,404],{"class":38,"style":39},[36,401,43],{"style":42},[36,403,89],{"style":46},[36,405,54],{"style":42},[36,407,408,410,413],{"class":38,"style":39},[36,409,96],{"style":42},[36,411,412],{"style":46},"Form",[36,414,54],{"style":42},[36,416,418,420,423,426,428,431],{"class":417,"style":39},[38,195],[36,419,106],{"style":42},[36,421,422],{"style":46},"Field.Root",[36,424,425],{"style":50}," name",[36,427,318],{"style":42},[36,429,430],{"style":70},"\"autoplay\"",[36,432,54],{"style":42},[36,434,435,437,440],{"class":38,"style":39},[36,436,215],{"style":42},[36,438,439],{"style":46},"Field.Label",[36,441,54],{"style":42},[36,443,444,447,449],{"class":38,"style":39},[36,445,446],{"style":42},"        \u003C",[36,448,99],{"style":46},[36,450,54],{"style":42},[36,452,453,456,458],{"class":38,"style":39},[36,454,455],{"style":42},"          \u003C",[36,457,109],{"style":46},[36,459,112],{"style":42},[36,461,462,465,467],{"class":38,"style":39},[36,463,464],{"style":42},"        \u003C\u002F",[36,466,99],{"style":46},[36,468,54],{"style":42},[36,470,471],{"class":38,"style":39},[36,472,473],{"style":42},"        Autoplay",[36,475,476,479,481],{"class":38,"style":39},[36,477,478],{"style":42},"      \u003C\u002F",[36,480,439],{"style":46},[36,482,54],{"style":42},[36,484,485,487,489],{"class":38,"style":39},[36,486,224],{"style":42},[36,488,422],{"style":46},[36,490,54],{"style":42},[36,492,493,495,497],{"class":38,"style":39},[36,494,117],{"style":42},[36,496,412],{"style":46},[36,498,54],{"style":42},[36,500,501,503,505],{"class":38,"style":39},[36,502,76],{"style":42},[36,504,89],{"style":46},[36,506,54],{"style":42},[13,508,509,510,512],{},"When wrapped in ",[32,511,422],{},", toggling the switch runs the field's validation.",[21,514,516],{"id":515},"api-reference","API reference",[169,518,520],{"id":519},"api-reference-root","Root",[13,522,523,524,526,527,530],{},"Represents the switch itself.\nRenders a ",[32,525,258],{}," element and a hidden ",[32,528,529],{},"\u003Cinput>"," beside.",[532,533],"table",{"columns":534,"rows":538},[535,536,537],"Prop","Type","Default",[539,551,562,571,581,592,601,610,619,628,637,646,655,664,674],{"summary":540,"detail":544},[541,542,543],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>'span' | 'button'\u003C\u002Fcode>","\u003Ccode>'span'\u003C\u002Fcode>",[545,546,547,548],{"label":535,"html":541},{"label":536,"html":542},{"label":537,"html":543},{"label":549,"html":550},"Description","HTML element to render.",{"summary":552,"detail":556},[553,554,555],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[557,558,559,560],{"label":535,"html":553},{"label":536,"html":554},{"label":537,"html":555},{"label":549,"html":561},"CSS class applied to the element.",{"summary":563,"detail":565},[564,554,555],"\u003Ccode>style\u003C\u002Fcode>",[566,567,568,569],{"label":535,"html":564},{"label":536,"html":554},{"label":537,"html":555},{"label":549,"html":570},"Inline style applied to the element.",{"summary":572,"detail":575},[573,554,574],"\u003Ccode>id\u003C\u002Fcode>","auto",[576,577,578,579],{"label":535,"html":573},{"label":536,"html":554},{"label":537,"html":574},{"label":549,"html":580},"Custom element ID. Applied to the hidden input, or to the root when \u003Ccode>as="button"\u003C\u002Fcode>.",{"summary":582,"detail":586},[583,584,585],"\u003Ccode>checked\u003C\u002Fcode>","\u003Ccode>boolean\u003C\u002Fcode>","\u003Ccode>false\u003C\u002Fcode>",[587,588,589,590],{"label":535,"html":583},{"label":536,"html":584},{"label":537,"html":585},{"label":549,"html":591},"Checked state. Pass an initial value for uncontrolled use, or \u003Ccode>v-model:checked\u003C\u002Fcode> to control it.",{"summary":593,"detail":595},[594,584,585],"\u003Ccode>disabled\u003C\u002Fcode>",[596,597,598,599],{"label":535,"html":594},{"label":536,"html":584},{"label":537,"html":585},{"label":549,"html":600},"Disables interaction. Cascades from \u003Ccode>Field.Root\u003C\u002Fcode> if wrapped.",{"summary":602,"detail":604},[603,584,585],"\u003Ccode>readOnly\u003C\u002Fcode>",[605,606,607,608],{"label":535,"html":603},{"label":536,"html":584},{"label":537,"html":585},{"label":549,"html":609},"User can't toggle.",{"summary":611,"detail":613},[612,584,585],"\u003Ccode>required\u003C\u002Fcode>",[614,615,616,617],{"label":535,"html":612},{"label":536,"html":584},{"label":537,"html":585},{"label":549,"html":618},"Marks the underlying input required for form submission.",{"summary":620,"detail":622},[621,554,555],"\u003Ccode>name\u003C\u002Fcode>",[623,624,625,626],{"label":535,"html":621},{"label":536,"html":554},{"label":537,"html":555},{"label":549,"html":627},"Form-submission key. Field's \u003Ccode>name\u003C\u002Fcode> overrides this if wrapped.",{"summary":629,"detail":631},[630,554,555],"\u003Ccode>value\u003C\u002Fcode>",[632,633,634,635],{"label":535,"html":630},{"label":536,"html":554},{"label":537,"html":555},{"label":549,"html":636},"Submitted value when on. Unset submits \u003Ccode>"on"\u003C\u002Fcode>, matching a native checkbox.",{"summary":638,"detail":640},[639,554,555],"\u003Ccode>form\u003C\u002Fcode>",[641,642,643,644],{"label":535,"html":639},{"label":536,"html":554},{"label":537,"html":555},{"label":549,"html":645},"Form id when the switch is rendered outside its form.",{"summary":647,"detail":649},[648,554,555],"\u003Ccode>aria-labelledby\u003C\u002Fcode>",[650,651,652,653],{"label":535,"html":648},{"label":536,"html":554},{"label":537,"html":555},{"label":549,"html":654},"Accessible name for the switch.",{"summary":656,"detail":658},[657,554,555],"\u003Ccode>aria-describedby\u003C\u002Fcode>",[659,660,661,662],{"label":535,"html":657},{"label":536,"html":554},{"label":537,"html":555},{"label":549,"html":663},"Additional description IDs; merged with Field message IDs when wrapped in \u003Ccode>Field.Root\u003C\u002Fcode>.",{"summary":665,"detail":668},[666,667,555],"\u003Ccode>update:checked\u003C\u002Fcode>","\u003Ccode>(checked: boolean) => void\u003C\u002Fcode>",[669,670,671,672],{"label":535,"html":666},{"label":536,"html":667},{"label":537,"html":555},{"label":549,"html":673},"Emitted whenever the switch toggles.",{"summary":675,"detail":678},[676,677,555],"\u003Ccode>default\u003C\u002Fcode>","\u003Ccode>Slot<{ checked, disabled, readOnly, required, touched, dirty, filled, focused, valid }>\u003C\u002Fcode>",[679,680,681,682],{"label":535,"html":676},{"label":536,"html":677},{"label":537,"html":555},{"label":549,"html":683},"Switch content; receives the switch state.",[532,685,686,699],{},[687,688,689],"thead",{},[690,691,692,697],"tr",{},[693,694,696],"th",{"style":695},"text-align:left","Attribute",[693,698,549],{"style":695},[700,701,702,713,723,733,743,753,766,778,790,802,814],"tbody",{},[690,703,704,710],{},[705,706,707],"td",{"style":695},[32,708,709],{},"data-checked",[705,711,712],{"style":695},"Present when the switch is on.",[690,714,715,720],{},[705,716,717],{"style":695},[32,718,719],{},"data-unchecked",[705,721,722],{"style":695},"Present when the switch is off.",[690,724,725,730],{},[705,726,727],{"style":695},[32,728,729],{},"data-disabled",[705,731,732],{"style":695},"Present when disabled.",[690,734,735,740],{},[705,736,737],{"style":695},[32,738,739],{},"data-readonly",[705,741,742],{"style":695},"Present when read-only.",[690,744,745,750],{},[705,746,747],{"style":695},[32,748,749],{},"data-required",[705,751,752],{"style":695},"Present when required.",[690,754,755,760],{},[705,756,757],{"style":695},[32,758,759],{},"data-valid",[705,761,762,763,765],{"style":695},"Present when the field is valid (when wrapped in ",[32,764,422],{},").",[690,767,768,773],{},[705,769,770],{"style":695},[32,771,772],{},"data-invalid",[705,774,775,776,765],{"style":695},"Present when the field is invalid (when wrapped in ",[32,777,422],{},[690,779,780,785],{},[705,781,782],{"style":695},[32,783,784],{},"data-touched",[705,786,787,788,765],{"style":695},"Present when the field has been touched (when wrapped in ",[32,789,422],{},[690,791,792,797],{},[705,793,794],{"style":695},[32,795,796],{},"data-dirty",[705,798,799,800,765],{"style":695},"Present when the value has changed (when wrapped in ",[32,801,422],{},[690,803,804,809],{},[705,805,806],{"style":695},[32,807,808],{},"data-filled",[705,810,811,812,765],{"style":695},"Present when checked (when wrapped in ",[32,813,422],{},[690,815,816,821],{},[705,817,818],{"style":695},[32,819,820],{},"data-focused",[705,822,823,824,765],{"style":695},"Present when focused (when wrapped in ",[32,825,422],{},[169,827,829],{"id":828},"api-reference-thumb","Thumb",[13,831,832,833,835],{},"The movable part that indicates whether the switch is on or off.\nRenders a ",[32,834,258],{}," element.",[532,837],{"columns":838,"rows":839},[535,536,537],[840,848,855,862],{"summary":841,"detail":843},[541,842,543],"\u003Ccode>keyof HTMLElementTagNameMap\u003C\u002Fcode>",[844,845,846,847],{"label":535,"html":541},{"label":536,"html":842},{"label":537,"html":543},{"label":549,"html":550},{"summary":849,"detail":850},[553,554,555],[851,852,853,854],{"label":535,"html":553},{"label":536,"html":554},{"label":537,"html":555},{"label":549,"html":561},{"summary":856,"detail":857},[564,554,555],[858,859,860,861],{"label":535,"html":564},{"label":536,"html":554},{"label":537,"html":555},{"label":549,"html":570},{"summary":863,"detail":864},[676,677,555],[865,866,867,868],{"label":535,"html":676},{"label":536,"html":677},{"label":537,"html":555},{"label":549,"html":869},"Thumb content; receives the switch state.",[532,871,872,880],{},[687,873,874],{},[690,875,876,878],{},[693,877,696],{"style":695},[693,879,549],{"style":695},[700,881,882,890,898,906,914,922,932,942,952,962,972],{},[690,883,884,888],{},[705,885,886],{"style":695},[32,887,709],{},[705,889,712],{"style":695},[690,891,892,896],{},[705,893,894],{"style":695},[32,895,719],{},[705,897,722],{"style":695},[690,899,900,904],{},[705,901,902],{"style":695},[32,903,729],{},[705,905,732],{"style":695},[690,907,908,912],{},[705,909,910],{"style":695},[32,911,739],{},[705,913,742],{"style":695},[690,915,916,920],{},[705,917,918],{"style":695},[32,919,749],{},[705,921,752],{"style":695},[690,923,924,928],{},[705,925,926],{"style":695},[32,927,759],{},[705,929,762,930,765],{"style":695},[32,931,422],{},[690,933,934,938],{},[705,935,936],{"style":695},[32,937,772],{},[705,939,775,940,765],{"style":695},[32,941,422],{},[690,943,944,948],{},[705,945,946],{"style":695},[32,947,784],{},[705,949,787,950,765],{"style":695},[32,951,422],{},[690,953,954,958],{},[705,955,956],{"style":695},[32,957,796],{},[705,959,799,960,765],{"style":695},[32,961,422],{},[690,963,964,968],{},[705,965,966],{"style":695},[32,967,808],{},[705,969,811,970,765],{"style":695},[32,971,422],{},[690,973,974,978],{},[705,975,976],{"style":695},[32,977,820],{},[705,979,823,980,765],{"style":695},[32,981,422],{},"\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\"> { Switch } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fswitch'\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 select-none\"\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\">Switch.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 h-5 w-9 rounded-md bg-gray-300 p-px inset-shadow-xs outline-offset-2 outline-gray-950 transition-colors duration-150 focus-visible:outline-2 data-checked:bg-emerald-600\"\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\">Switch.Thumb\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\">\"aspect-square h-full rounded-[calc(var(--radius-md)-1px)] bg-white shadow-sm transition-transform duration-150 data-checked:translate-x-4\"\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\">Switch.Root\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\">    Autoplay\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>",1789390077459]