[{"data":1,"prerenderedAt":998},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fswitch":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fswitch":993},[4,31,178],{"title":5,"path":6,"stem":7,"children":8,"page":30},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[9,14,18,22,26],{"title":10,"path":11,"stem":12,"status":13,"badge":13},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",null,{"title":15,"path":16,"stem":17,"status":13,"badge":13},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":19,"path":20,"stem":21,"status":13,"badge":13},"Theming","\u002Fdocs\u002Fgetting-started\u002Ftheming","docs\u002F1.getting-started\u002F3.theming",{"title":23,"path":24,"stem":25,"status":13,"badge":13},"Accessibility & reduced motion","\u002Fdocs\u002Fgetting-started\u002Faccessibility","docs\u002F1.getting-started\u002F4.accessibility",{"title":27,"path":28,"stem":29,"status":13,"badge":13},"Sound","\u002Fdocs\u002Fgetting-started\u002Fsound","docs\u002F1.getting-started\u002F5.sound",false,{"title":32,"path":33,"stem":34,"children":35,"page":30},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[36,40,44,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,126,130,134,138,142,146,150,154,158,162,166,170,174],{"title":37,"path":38,"stem":39,"status":13,"badge":13},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002F01.button",{"title":41,"path":42,"stem":43,"status":13,"badge":13},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002F2.components\u002F02.spinner",{"title":45,"path":46,"stem":47,"status":13,"badge":48},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002F2.components\u002F03.toggle","experimental",{"title":50,"path":51,"stem":52,"status":13,"badge":13},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002F04.switch",{"title":54,"path":55,"stem":56,"status":13,"badge":13},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002F05.checkbox",{"title":58,"path":59,"stem":60,"status":13,"badge":13},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002F06.radio-group",{"title":62,"path":63,"stem":64,"status":13,"badge":48},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002F07.input",{"title":66,"path":67,"stem":68,"status":13,"badge":13},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002F08.slider",{"title":70,"path":71,"stem":72,"status":13,"badge":13},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002F09.progress",{"title":74,"path":75,"stem":76,"status":13,"badge":48},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002F10.select",{"title":78,"path":79,"stem":80,"status":13,"badge":13},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002F11.popover",{"title":82,"path":83,"stem":84,"status":13,"badge":13},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002F12.dropdown-menu",{"title":86,"path":87,"stem":88,"status":13,"badge":13},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002F13.tooltip",{"title":90,"path":91,"stem":92,"status":13,"badge":13},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002F14.tabs",{"title":94,"path":95,"stem":96,"status":13,"badge":48},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002F15.accordion",{"title":98,"path":99,"stem":100,"status":13,"badge":48},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002F2.components\u002F16.dialog",{"title":102,"path":103,"stem":104,"status":13,"badge":48},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002F2.components\u002F17.alert-dialog",{"title":106,"path":107,"stem":108,"status":13,"badge":48},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002F2.components\u002F18.sheet",{"title":110,"path":111,"stem":112,"status":13,"badge":48},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002F19.drawer",{"title":114,"path":115,"stem":116,"status":13,"badge":13},"Toaster","\u002Fdocs\u002Fcomponents\u002Ftoaster","docs\u002F2.components\u002F20.toaster",{"title":118,"path":119,"stem":120,"status":13,"badge":48},"Page transition","\u002Fdocs\u002Fcomponents\u002Fpage-transition","docs\u002F2.components\u002F21.page-transition",{"title":122,"path":123,"stem":124,"status":125,"badge":13},"Blob","\u002Fdocs\u002Fcomponents\u002Fblob","docs\u002F2.components\u002F22.blob","soon",{"title":127,"path":128,"stem":129,"status":13,"badge":48},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002F2.components\u002F23.command",{"title":131,"path":132,"stem":133,"status":13,"badge":48},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002F2.components\u002F24.combobox",{"title":135,"path":136,"stem":137,"status":13,"badge":48},"NumberField","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002F2.components\u002F25.number-field",{"title":139,"path":140,"stem":141,"status":13,"badge":48},"InputOTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002F2.components\u002F26.input-otp",{"title":143,"path":144,"stem":145,"status":13,"badge":48},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002F2.components\u002F27.hover-card",{"title":147,"path":148,"stem":149,"status":13,"badge":48},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002F28.context-menu",{"title":151,"path":152,"stem":153,"status":13,"badge":48},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002F29.skeleton",{"title":155,"path":156,"stem":157,"status":13,"badge":48},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002F30.badge",{"title":159,"path":160,"stem":161,"status":13,"badge":48},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002F31.card",{"title":163,"path":164,"stem":165,"status":13,"badge":48},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002F32.avatar",{"title":167,"path":168,"stem":169,"status":13,"badge":48},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002F33.separator",{"title":171,"path":172,"stem":173,"status":13,"badge":48},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002F2.components\u002F34.label",{"title":175,"path":176,"stem":177,"status":13,"badge":48},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002F35.sidebar",{"title":179,"path":180,"stem":181,"children":182,"page":30},"Core","\u002Fdocs\u002Fcore","docs\u002F3.core",[183],{"title":184,"path":185,"stem":186,"status":13,"badge":13},"API reference","\u002Fdocs\u002Fcore\u002Fapi","docs\u002F3.core\u002F1.api",{"id":188,"title":50,"badge":13,"body":189,"description":988,"extension":989,"meta":990,"navigation":378,"path":51,"seo":991,"status":13,"stem":52,"__hash__":992},"docs\u002Fdocs\u002F2.components\u002F04.switch.md",{"type":190,"value":191,"toc":977},"minimark",[192,201,221,267,271,307,311,498,502,505,552,560,564,567,573,607,611,638,643,759,763,770,775,824,828,831,890,910,914,917,920,945,951,955,967,973],[193,194,197],"playground",{"caption":195,"name":196},"Click, or Tab to it and press Space.","switch",[198,199],"demo-switch",{"set":200},"default",[202,203,205],"callout",{"type":204},"alpha",[206,207,208,212,213,216,217,220],"p",{},[209,210,211],"code",{},"@goopui\u002Fvue"," and ",[209,214,215],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The switches on this page are the real ",[209,218,219],{},"GoopSwitch",", and the code below is exactly what you write.",[206,222,223,225,226,212,235,238,239,242,243,242,246,242,249,242,252,242,255,258,259,262,263,266],{},[209,224,219],{}," wraps reka-ui's ",[227,228,232],"a",{"href":229,"rel":230},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fswitch",[231],"nofollow",[209,233,234],{},"SwitchRoot",[209,236,237],{},"SwitchThumb",", the same primitive as shadcn-vue's Switch, with the same API, classes, and sizes. ",[209,240,241],{},"v-model",", ",[209,244,245],{},"disabled",[209,247,248],{},"name",[209,250,251],{},"required",[209,253,254],{},"value",[209,256,257],{},"asChild",", keyboard handling, ",[209,260,261],{},"role=\"switch\"",", and ",[209,264,265],{},"aria-checked"," all come from reka-ui. The goo is a layer inside the track.",[268,269,15],"h2",{"id":270},"installation",[206,272,273,274,276,277,279,280,284,285,287,288,242,291,242,294,242,297,242,300,242,303,306],{},"Install ",[209,275,215],{}," or ",[209,278,211],{}," as shown on the ",[227,281,283],{"href":282},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports ",[209,286,219],{},". It uses the same shadcn tokens as the plain Switch (",[209,289,290],{},"--primary",[209,292,293],{},"--input",[209,295,296],{},"--background",[209,298,299],{},"--foreground",[209,301,302],{},"--primary-foreground",[209,304,305],{},"--ring",").",[268,308,310],{"id":309},"usage","Usage",[312,313,318],"pre",{"className":314,"code":315,"language":316,"meta":317,"style":317},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\nimport { GoopSwitch } from '@goopui\u002Fvue'\n\nconst airplane = ref(true)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel class=\"flex items-center gap-2 text-sm\">\n    \u003CGoopSwitch v-model=\"airplane\" \u002F>\n    Airplane mode\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n","vue","",[209,319,320,350,357,373,380,405,415,420,430,449,473,479,489],{"__ignoreMap":317},[321,322,325,329,333,337,340,343,347],"span",{"class":323,"line":324},"line",1,[321,326,328],{"class":327},"sVt8B","\u003C",[321,330,332],{"class":331},"s9eBZ","script",[321,334,336],{"class":335},"sScJk"," setup",[321,338,339],{"class":335}," lang",[321,341,342],{"class":327},"=",[321,344,346],{"class":345},"sZZnC","\"ts\"",[321,348,349],{"class":327},">\n",[321,351,353],{"class":323,"line":352},2,[321,354,356],{"class":355},"sJ8bj","\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\n",[321,358,360,364,367,370],{"class":323,"line":359},3,[321,361,363],{"class":362},"szBVR","import",[321,365,366],{"class":327}," { GoopSwitch } ",[321,368,369],{"class":362},"from",[321,371,372],{"class":345}," '@goopui\u002Fvue'\n",[321,374,376],{"class":323,"line":375},4,[321,377,379],{"emptyLinePlaceholder":378},true,"\n",[321,381,383,386,390,393,396,399,402],{"class":323,"line":382},5,[321,384,385],{"class":362},"const",[321,387,389],{"class":388},"sj4cs"," airplane",[321,391,392],{"class":362}," =",[321,394,395],{"class":335}," ref",[321,397,398],{"class":327},"(",[321,400,401],{"class":388},"true",[321,403,404],{"class":327},")\n",[321,406,408,411,413],{"class":323,"line":407},6,[321,409,410],{"class":327},"\u003C\u002F",[321,412,332],{"class":331},[321,414,349],{"class":327},[321,416,418],{"class":323,"line":417},7,[321,419,379],{"emptyLinePlaceholder":378},[321,421,423,425,428],{"class":323,"line":422},8,[321,424,328],{"class":327},[321,426,427],{"class":331},"template",[321,429,349],{"class":327},[321,431,433,436,439,442,444,447],{"class":323,"line":432},9,[321,434,435],{"class":327},"  \u003C",[321,437,438],{"class":331},"label",[321,440,441],{"class":335}," class",[321,443,342],{"class":327},[321,445,446],{"class":345},"\"flex items-center gap-2 text-sm\"",[321,448,349],{"class":327},[321,450,452,455,457,460,462,465,468,470],{"class":323,"line":451},10,[321,453,454],{"class":327},"    \u003C",[321,456,219],{"class":331},[321,458,459],{"class":335}," v-model",[321,461,342],{"class":327},[321,463,464],{"class":345},"\"",[321,466,467],{"class":327},"airplane",[321,469,464],{"class":345},[321,471,472],{"class":327}," \u002F>\n",[321,474,476],{"class":323,"line":475},11,[321,477,478],{"class":327},"    Airplane mode\n",[321,480,482,485,487],{"class":323,"line":481},12,[321,483,484],{"class":327},"  \u003C\u002F",[321,486,438],{"class":331},[321,488,349],{"class":327},[321,490,492,494,496],{"class":323,"line":491},13,[321,493,410],{"class":327},[321,495,427],{"class":331},[321,497,349],{"class":327},[268,499,501],{"id":500},"what-it-does","What it does",[206,503,504],{},"Each toggle is one move with several parts. Each part is an effect you can turn off:",[506,507,508,516,522,528,534,540,546],"ul",{},[509,510,511,515],"li",{},[512,513,514],"strong",{},"stretch."," The thumb leaves slowly, because the goo sticks. It speeds up, leans, and trails a teardrop tail.",[509,517,518,521],{},[512,519,520],{},"bridge."," A blob stays stuck at the start, joined by a neck that thins and snaps.",[509,523,524,527],{},[512,525,526],{},"squish."," The wobble after it lands.",[509,529,530,533],{},[512,531,532],{},"splat."," The thumb hits the far wall and flattens like a water balloon, then rebounds.",[509,535,536,539],{},[512,537,538],{},"droplets."," A few drops fly off the wall on impact and fall back in.",[509,541,542,545],{},[512,543,544],{},"wave."," The track keeps its old color while the thumb travels, so the thumb always contrasts it. On impact the new color floods in from the wall. If you toggle again mid-wave, it keeps moving from where it is, with no color flash.",[509,547,548,551],{},[512,549,550],{},"fill."," The primary color is goo, not a flat background.",[206,553,554,212,556,559],{},[209,555,265],{},[209,557,558],{},"data-state"," flip on click, as in any reka-ui switch. Only the colors wait for the impact.",[268,561,563],{"id":562},"sizes","Sizes",[206,565,566],{},"The same two sizes as shadcn:",[568,569,571],"preview",{":controls":570},"false",[198,572],{"set":562},[312,574,576],{"className":314,"code":575,"language":316,"meta":317,"style":317},"\u003CGoopSwitch size=\"sm\" default-value \u002F>\n\u003CGoopSwitch default-value \u002F>\n",[209,577,578,597],{"__ignoreMap":317},[321,579,580,582,584,587,589,592,595],{"class":323,"line":324},[321,581,328],{"class":327},[321,583,219],{"class":331},[321,585,586],{"class":335}," size",[321,588,342],{"class":327},[321,590,591],{"class":345},"\"sm\"",[321,593,594],{"class":335}," default-value",[321,596,472],{"class":327},[321,598,599,601,603,605],{"class":323,"line":352},[321,600,328],{"class":327},[321,602,219],{"class":331},[321,604,594],{"class":335},[321,606,472],{"class":327},[268,608,610],{"id":609},"effects-and-presets","Effects and presets",[206,612,613,614,616,617,619,620,623,624,627,628,242,631,262,634,637],{},"Every effect is a prop. ",[209,615,570],{}," turns it off, ",[209,618,401],{}," uses the preset's strength, and a number scales it (",[209,621,622],{},"0"," is off). ",[209,625,626],{},"fill"," is on or off only. ",[209,629,630],{},"preset",[209,632,633],{},"speed",[209,635,636],{},"renderer"," set the base.",[568,639,640],{":controls":570},[198,641],{"set":642},"features",[312,644,646],{"className":314,"code":645,"language":316,"meta":317,"style":317},"\u003CGoopSwitch default-value :splat=\"false\" :droplets=\"false\" \u002F>\n\u003CGoopSwitch :fill=\"false\" default-value \u002F>\n\u003CGoopSwitch preset=\"wild\" \u002F>\n\u003CGoopSwitch preset=\"subtle\" \u002F>\n\u003CGoopSwitch :speed=\"0.5\" \u002F>\n",[209,647,648,685,707,723,738],{"__ignoreMap":317},[321,649,650,652,654,656,659,662,664,666,668,670,672,675,677,679,681,683],{"class":323,"line":324},[321,651,328],{"class":327},[321,653,219],{"class":331},[321,655,594],{"class":335},[321,657,658],{"class":327}," :",[321,660,661],{"class":335},"splat",[321,663,342],{"class":327},[321,665,464],{"class":345},[321,667,570],{"class":388},[321,669,464],{"class":345},[321,671,658],{"class":327},[321,673,674],{"class":335},"droplets",[321,676,342],{"class":327},[321,678,464],{"class":345},[321,680,570],{"class":388},[321,682,464],{"class":345},[321,684,472],{"class":327},[321,686,687,689,691,693,695,697,699,701,703,705],{"class":323,"line":352},[321,688,328],{"class":327},[321,690,219],{"class":331},[321,692,658],{"class":327},[321,694,626],{"class":335},[321,696,342],{"class":327},[321,698,464],{"class":345},[321,700,570],{"class":388},[321,702,464],{"class":345},[321,704,594],{"class":335},[321,706,472],{"class":327},[321,708,709,711,713,716,718,721],{"class":323,"line":359},[321,710,328],{"class":327},[321,712,219],{"class":331},[321,714,715],{"class":335}," preset",[321,717,342],{"class":327},[321,719,720],{"class":345},"\"wild\"",[321,722,472],{"class":327},[321,724,725,727,729,731,733,736],{"class":323,"line":375},[321,726,328],{"class":327},[321,728,219],{"class":331},[321,730,715],{"class":335},[321,732,342],{"class":327},[321,734,735],{"class":345},"\"subtle\"",[321,737,472],{"class":327},[321,739,740,742,744,746,748,750,752,755,757],{"class":323,"line":382},[321,741,328],{"class":327},[321,743,219],{"class":331},[321,745,658],{"class":327},[321,747,633],{"class":335},[321,749,342],{"class":327},[321,751,464],{"class":345},[321,753,754],{"class":388},"0.5",[321,756,464],{"class":345},[321,758,472],{"class":327},[268,760,762],{"id":761},"disabled-and-goo-off","Disabled and goo off",[206,764,765,766,769],{},"A disabled switch is shadcn's: dimmed, and it ignores clicks. ",[209,767,768],{},":goo=\"false\""," renders a plain shadcn Switch.",[568,771,772],{":controls":570},[198,773],{"set":774},"states",[312,776,778],{"className":314,"code":777,"language":316,"meta":317,"style":317},"\u003CGoopSwitch disabled \u002F>\n\u003CGoopSwitch disabled default-value \u002F>\n\u003CGoopSwitch :goo=\"false\" \u002F>\n",[209,779,780,791,803],{"__ignoreMap":317},[321,781,782,784,786,789],{"class":323,"line":324},[321,783,328],{"class":327},[321,785,219],{"class":331},[321,787,788],{"class":335}," disabled",[321,790,472],{"class":327},[321,792,793,795,797,799,801],{"class":323,"line":352},[321,794,328],{"class":327},[321,796,219],{"class":331},[321,798,788],{"class":335},[321,800,594],{"class":335},[321,802,472],{"class":327},[321,804,805,807,809,811,814,816,818,820,822],{"class":323,"line":359},[321,806,328],{"class":327},[321,808,219],{"class":331},[321,810,658],{"class":327},[321,812,813],{"class":335},"goo",[321,815,342],{"class":327},[321,817,464],{"class":345},[321,819,570],{"class":388},[321,821,464],{"class":345},[321,823,472],{"class":327},[268,825,827],{"id":826},"colors","Colors",[206,829,830],{},"The goo reads two CSS variables from the switch, set from the shadcn tokens. Override them on the element or an ancestor:",[832,833,834,850],"table",{},[835,836,837],"thead",{},[838,839,840,844,847],"tr",{},[841,842,843],"th",{},"Variable",[841,845,846],{},"Default",[841,848,849],{},"What it colors",[851,852,853,869],"tbody",{},[838,854,855,861,866],{},[856,857,858],"td",{},[209,859,860],{},"--goop-switch-fill",[856,862,863],{},[209,864,865],{},"var(--primary)",[856,867,868],{},"The track fill, the wave, and the droplets.",[838,870,871,876,881],{},[856,872,873],{},[209,874,875],{},"--goop-switch-thumb",[856,877,878],{},[209,879,880],{},"var(--background)",[856,882,883,884,886,887,889],{},"The thumb. In dark mode it follows ",[209,885,299],{}," when off and ",[209,888,302],{}," when on, like shadcn.",[312,891,893],{"className":314,"code":892,"language":316,"meta":317,"style":317},"\u003CGoopSwitch class=\"[--goop-switch-fill:var(--color-emerald-500)] data-checked:border-emerald-500\" \u002F>\n",[209,894,895],{"__ignoreMap":317},[321,896,897,899,901,903,905,908],{"class":323,"line":324},[321,898,328],{"class":327},[321,900,219],{"class":331},[321,902,441],{"class":335},[321,904,342],{"class":327},[321,906,907],{"class":345},"\"[--goop-switch-fill:var(--color-emerald-500)] data-checked:border-emerald-500\"",[321,909,472],{"class":327},[268,911,913],{"id":912},"props","Props",[206,915,916],{},"GoopSwitch keeps the shadcn-vue Switch API and adds the goo props.",[918,919],"component-props",{"name":196},[206,921,922,923,926,927,929,930,933,934,937,938,940,941,944],{},"The ",[209,924,925],{},"thumb"," slot renders inside the thumb (for an icon, say) and receives reka-ui's slot props. ",[209,928,219],{}," also exposes ",[209,931,932],{},"handle"," (the live switch handle, ",[209,935,936],{},"null"," before mount or with ",[209,939,813],{}," off) and ",[209,942,943],{},"el"," (the track).",[206,946,947,948,950],{},"Before it mounts, during SSR, and with ",[209,949,768],{},", it is a plain shadcn Switch, so first paint and hydration match.",[268,952,954],{"id":953},"accessibility","Accessibility",[206,956,957,958,242,960,962,963,966],{},"It's a real reka-ui switch: ",[209,959,261],{},[209,961,265],{},", focus ring, Space to toggle. The goo layers are ",[209,964,965],{},"aria-hidden"," and can't be clicked. The real thumb stays in place, transparent, so hit area and focus behave as usual.",[206,968,969,970,972],{},"Reduced motion keeps the goo shape and turns off the simulation: the thumb and fill jump straight to the end state, with no travel, splat, droplets, or wave. See ",[227,971,23],{"href":24},".",[974,975,976],"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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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":317,"searchDepth":359,"depth":359,"links":978},[979,980,981,982,983,984,985,986,987],{"id":270,"depth":352,"text":15},{"id":309,"depth":352,"text":310},{"id":500,"depth":352,"text":501},{"id":562,"depth":352,"text":563},{"id":609,"depth":352,"text":610},{"id":761,"depth":352,"text":762},{"id":826,"depth":352,"text":827},{"id":912,"depth":352,"text":913},{"id":953,"depth":352,"text":954},"shadcn's Switch with a goo thumb. It stretches across the track, splats against the wall, and floods the track with color.","md",{},{"title":50,"description":988},"mjBPmttDFwfhTkd9VfwYDkvbob80wT9y7QG-Q37Ozig",[994,996],{"title":45,"path":46,"stem":47,"description":995,"children":-1},"shadcn's Toggle and ToggleGroup with a goo fill. Pressing floods the button from where you pressed, and in a group the goo flows from one item to the next.",{"title":54,"path":55,"stem":56,"description":997,"children":-1},"shadcn's Checkbox where checking drops goo into the box. It splats, splashes, and sucks back up when you uncheck.",1793670386527]