[{"data":1,"prerenderedAt":953},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fcheckbox":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fcheckbox":948},[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":54,"badge":13,"body":189,"description":943,"extension":944,"meta":945,"navigation":373,"path":55,"seo":946,"status":13,"stem":56,"__hash__":947},"docs\u002Fdocs\u002F2.components\u002F05.checkbox.md",{"type":190,"value":191,"toc":932},"minimark",[192,201,221,268,272,302,306,493,497,520,523,527,541,547,657,661,678,683,769,773,778,828,832,843,863,867,870,873,894,901,905,922,928],[193,194,197],"playground",{"caption":195,"name":196},"Click, or Tab to a box and press Space.","checkbox",[198,199],"demo-checkbox",{"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 checkboxes on this page are the real ",[209,218,219],{},"GoopCheckbox",", and the code below is exactly what you write.",[206,222,223,225,226,212,235,238,239,242,243,246,247,250,251,250,254,250,257,250,260,263,264,267],{},[209,224,219],{}," wraps reka-ui's ",[227,228,232],"a",{"href":229,"rel":230},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fcheckbox",[231],"nofollow",[209,233,234],{},"CheckboxRoot",[209,236,237],{},"CheckboxIndicator",", the same primitive as shadcn-vue's Checkbox, with the same API and classes. ",[209,240,241],{},"v-model"," (including ",[209,244,245],{},"'indeterminate'","), ",[209,248,249],{},"disabled",", ",[209,252,253],{},"name",[209,255,256],{},"required",[209,258,259],{},"value",[209,261,262],{},"asChild",", keyboard handling, and ",[209,265,266],{},"role=\"checkbox\""," all come from reka-ui. The goo is a layer inside the box.",[269,270,15],"h2",{"id":271},"installation",[206,273,274,275,277,278,280,281,285,286,288,289,250,292,250,295,250,298,301],{},"Install ",[209,276,215],{}," or ",[209,279,211],{}," as shown on the ",[227,282,284],{"href":283},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports ",[209,287,219],{},". It uses the same shadcn tokens as the plain Checkbox (",[209,290,291],{},"--primary",[209,293,294],{},"--primary-foreground",[209,296,297],{},"--input",[209,299,300],{},"--ring",").",[269,303,305],{"id":304},"usage","Usage",[307,308,313],"pre",{"className":309,"code":310,"language":311,"meta":312,"style":312},"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 { GoopCheckbox } from '@goopui\u002Fvue'\n\nconst terms = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel class=\"flex items-center gap-2 text-sm\">\n    \u003CGoopCheckbox v-model=\"terms\" \u002F>\n    Accept terms and conditions\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n","vue","",[209,314,315,345,352,368,375,400,410,415,425,444,468,474,484],{"__ignoreMap":312},[316,317,320,324,328,332,335,338,342],"span",{"class":318,"line":319},"line",1,[316,321,323],{"class":322},"sVt8B","\u003C",[316,325,327],{"class":326},"s9eBZ","script",[316,329,331],{"class":330},"sScJk"," setup",[316,333,334],{"class":330}," lang",[316,336,337],{"class":322},"=",[316,339,341],{"class":340},"sZZnC","\"ts\"",[316,343,344],{"class":322},">\n",[316,346,348],{"class":318,"line":347},2,[316,349,351],{"class":350},"sJ8bj","\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\n",[316,353,355,359,362,365],{"class":318,"line":354},3,[316,356,358],{"class":357},"szBVR","import",[316,360,361],{"class":322}," { GoopCheckbox } ",[316,363,364],{"class":357},"from",[316,366,367],{"class":340}," '@goopui\u002Fvue'\n",[316,369,371],{"class":318,"line":370},4,[316,372,374],{"emptyLinePlaceholder":373},true,"\n",[316,376,378,381,385,388,391,394,397],{"class":318,"line":377},5,[316,379,380],{"class":357},"const",[316,382,384],{"class":383},"sj4cs"," terms",[316,386,387],{"class":357}," =",[316,389,390],{"class":330}," ref",[316,392,393],{"class":322},"(",[316,395,396],{"class":383},"false",[316,398,399],{"class":322},")\n",[316,401,403,406,408],{"class":318,"line":402},6,[316,404,405],{"class":322},"\u003C\u002F",[316,407,327],{"class":326},[316,409,344],{"class":322},[316,411,413],{"class":318,"line":412},7,[316,414,374],{"emptyLinePlaceholder":373},[316,416,418,420,423],{"class":318,"line":417},8,[316,419,323],{"class":322},[316,421,422],{"class":326},"template",[316,424,344],{"class":322},[316,426,428,431,434,437,439,442],{"class":318,"line":427},9,[316,429,430],{"class":322},"  \u003C",[316,432,433],{"class":326},"label",[316,435,436],{"class":330}," class",[316,438,337],{"class":322},[316,440,441],{"class":340},"\"flex items-center gap-2 text-sm\"",[316,443,344],{"class":322},[316,445,447,450,452,455,457,460,463,465],{"class":318,"line":446},10,[316,448,449],{"class":322},"    \u003C",[316,451,219],{"class":326},[316,453,454],{"class":330}," v-model",[316,456,337],{"class":322},[316,458,459],{"class":340},"\"",[316,461,462],{"class":322},"terms",[316,464,459],{"class":340},[316,466,467],{"class":322}," \u002F>\n",[316,469,471],{"class":318,"line":470},11,[316,472,473],{"class":322},"    Accept terms and conditions\n",[316,475,477,480,482],{"class":318,"line":476},12,[316,478,479],{"class":322},"  \u003C\u002F",[316,481,433],{"class":326},[316,483,344],{"class":322},[316,485,487,489,491],{"class":318,"line":486},13,[316,488,405],{"class":322},[316,490,422],{"class":326},[316,492,344],{"class":322},[269,494,496],{"id":495},"what-it-does","What it does",[498,499,500,508,514],"ul",{},[501,502,503,507],"li",{},[504,505,506],"strong",{},"Checking."," A drop falls into the box from above, stretched along its fall. On impact the fill swells out of it and splats flat against the floor, then wobbles. A few droplets splash out sideways. The check mark appears once the splat has mostly settled.",[501,509,510,513],{},[504,511,512],{},"Unchecking."," The fill sucks up into a drop above the box on a neck. The neck snaps, and the drop swells and pops into specks.",[501,515,516,519],{},[504,517,518],{},"Indeterminate."," A goo bar stretches across the middle and wobbles. From checked, the fill drains into it.",[206,521,522],{},"The check mark is the same unfiltered icon as shadcn's, so it stays sharp. It is only held back until the goo lands.",[269,524,526],{"id":525},"indeterminate","Indeterminate",[206,528,529,531,532,250,535,537,538,540],{},[209,530,241],{}," takes ",[209,533,534],{},"true",[209,536,396],{},", or ",[209,539,245],{},", as in reka-ui:",[542,543,545],"preview",{":controls":396,"caption":544},"Click to cycle: indeterminate, checked, unchecked.",[198,546],{"set":525},[307,548,550],{"className":309,"code":549,"language":311,"meta":312,"style":312},"\u003Cscript setup lang=\"ts\">\nimport type { CheckboxState } from '@goopui\u002Fcore'\n\nconst all = ref\u003CCheckboxState>('indeterminate')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopCheckbox v-model=\"all\" \u002F>\n\u003C\u002Ftemplate>\n",[209,551,552,568,583,587,610,618,622,630,649],{"__ignoreMap":312},[316,553,554,556,558,560,562,564,566],{"class":318,"line":319},[316,555,323],{"class":322},[316,557,327],{"class":326},[316,559,331],{"class":330},[316,561,334],{"class":330},[316,563,337],{"class":322},[316,565,341],{"class":340},[316,567,344],{"class":322},[316,569,570,572,575,578,580],{"class":318,"line":347},[316,571,358],{"class":357},[316,573,574],{"class":357}," type",[316,576,577],{"class":322}," { CheckboxState } ",[316,579,364],{"class":357},[316,581,582],{"class":340}," '@goopui\u002Fcore'\n",[316,584,585],{"class":318,"line":354},[316,586,374],{"emptyLinePlaceholder":373},[316,588,589,591,594,596,598,600,603,606,608],{"class":318,"line":370},[316,590,380],{"class":357},[316,592,593],{"class":383}," all",[316,595,387],{"class":357},[316,597,390],{"class":330},[316,599,323],{"class":322},[316,601,602],{"class":330},"CheckboxState",[316,604,605],{"class":322},">(",[316,607,245],{"class":340},[316,609,399],{"class":322},[316,611,612,614,616],{"class":318,"line":377},[316,613,405],{"class":322},[316,615,327],{"class":326},[316,617,344],{"class":322},[316,619,620],{"class":318,"line":402},[316,621,374],{"emptyLinePlaceholder":373},[316,623,624,626,628],{"class":318,"line":412},[316,625,323],{"class":322},[316,627,422],{"class":326},[316,629,344],{"class":322},[316,631,632,634,636,638,640,642,645,647],{"class":318,"line":417},[316,633,430],{"class":322},[316,635,219],{"class":326},[316,637,454],{"class":330},[316,639,337],{"class":322},[316,641,459],{"class":340},[316,643,644],{"class":322},"all",[316,646,459],{"class":340},[316,648,467],{"class":322},[316,650,651,653,655],{"class":318,"line":427},[316,652,405],{"class":322},[316,654,422],{"class":326},[316,656,344],{"class":322},[269,658,660],{"id":659},"effects-and-presets","Effects and presets",[206,662,663,664,666,667,669,670,673,674,677],{},"Every effect is a prop. ",[209,665,396],{}," turns it off, ",[209,668,534],{}," uses the preset's strength, and a number scales it (",[209,671,672],{},"0"," is off). ",[209,675,676],{},"fill"," is on or off only.",[542,679,680],{":controls":396},[198,681],{"set":682},"features",[307,684,686],{"className":309,"code":685,"language":311,"meta":312,"style":312},"\u003CGoopCheckbox :splat=\"false\" \u002F>\n\u003CGoopCheckbox :droplets=\"false\" \u002F>\n\u003CGoopCheckbox preset=\"wild\" \u002F>\n\u003CGoopCheckbox :speed=\"0.5\" \u002F>\n",[209,687,688,710,731,747],{"__ignoreMap":312},[316,689,690,692,694,697,700,702,704,706,708],{"class":318,"line":319},[316,691,323],{"class":322},[316,693,219],{"class":326},[316,695,696],{"class":322}," :",[316,698,699],{"class":330},"splat",[316,701,337],{"class":322},[316,703,459],{"class":340},[316,705,396],{"class":383},[316,707,459],{"class":340},[316,709,467],{"class":322},[316,711,712,714,716,718,721,723,725,727,729],{"class":318,"line":347},[316,713,323],{"class":322},[316,715,219],{"class":326},[316,717,696],{"class":322},[316,719,720],{"class":330},"droplets",[316,722,337],{"class":322},[316,724,459],{"class":340},[316,726,396],{"class":383},[316,728,459],{"class":340},[316,730,467],{"class":322},[316,732,733,735,737,740,742,745],{"class":318,"line":354},[316,734,323],{"class":322},[316,736,219],{"class":326},[316,738,739],{"class":330}," preset",[316,741,337],{"class":322},[316,743,744],{"class":340},"\"wild\"",[316,746,467],{"class":322},[316,748,749,751,753,755,758,760,762,765,767],{"class":318,"line":370},[316,750,323],{"class":322},[316,752,219],{"class":326},[316,754,696],{"class":322},[316,756,757],{"class":330},"speed",[316,759,337],{"class":322},[316,761,459],{"class":340},[316,763,764],{"class":383},"0.5",[316,766,459],{"class":340},[316,768,467],{"class":322},[269,770,772],{"id":771},"disabled-and-goo-off","Disabled and goo off",[542,774,775],{":controls":396},[198,776],{"set":777},"states",[307,779,781],{"className":309,"code":780,"language":311,"meta":312,"style":312},"\u003CGoopCheckbox disabled \u002F>\n\u003CGoopCheckbox disabled default-value \u002F>\n\u003CGoopCheckbox :goo=\"false\" \u002F>\n",[209,782,783,794,807],{"__ignoreMap":312},[316,784,785,787,789,792],{"class":318,"line":319},[316,786,323],{"class":322},[316,788,219],{"class":326},[316,790,791],{"class":330}," disabled",[316,793,467],{"class":322},[316,795,796,798,800,802,805],{"class":318,"line":347},[316,797,323],{"class":322},[316,799,219],{"class":326},[316,801,791],{"class":330},[316,803,804],{"class":330}," default-value",[316,806,467],{"class":322},[316,808,809,811,813,815,818,820,822,824,826],{"class":318,"line":354},[316,810,323],{"class":322},[316,812,219],{"class":326},[316,814,696],{"class":322},[316,816,817],{"class":330},"goo",[316,819,337],{"class":322},[316,821,459],{"class":340},[316,823,396],{"class":383},[316,825,459],{"class":340},[316,827,467],{"class":322},[269,829,831],{"id":830},"colors","Colors",[206,833,834,835,838,839,842],{},"The fill and droplets use the ",[209,836,837],{},"--goop-checkbox-fill"," variable, which defaults to ",[209,840,841],{},"var(--primary)",", the color shadcn fills a checked box with. Override it on the element or an ancestor:",[307,844,846],{"className":309,"code":845,"language":311,"meta":312,"style":312},"\u003CGoopCheckbox class=\"[--goop-checkbox-fill:var(--color-emerald-500)] data-checked:border-emerald-500\" \u002F>\n",[209,847,848],{"__ignoreMap":312},[316,849,850,852,854,856,858,861],{"class":318,"line":319},[316,851,323],{"class":322},[316,853,219],{"class":326},[316,855,436],{"class":330},[316,857,337],{"class":322},[316,859,860],{"class":340},"\"[--goop-checkbox-fill:var(--color-emerald-500)] data-checked:border-emerald-500\"",[316,862,467],{"class":322},[269,864,866],{"id":865},"props","Props",[206,868,869],{},"GoopCheckbox keeps the shadcn-vue Checkbox API and adds the goo props.",[871,872],"component-props",{"name":196},[206,874,875,876,878,879,882,883,886,887,889,890,893],{},"The default slot replaces the check mark. It receives reka-ui's slot props. ",[209,877,219],{}," also exposes ",[209,880,881],{},"handle"," (the live checkbox handle, ",[209,884,885],{},"null"," before mount or with ",[209,888,817],{}," off) and ",[209,891,892],{},"el"," (the box).",[206,895,896,897,900],{},"Before it mounts, during SSR, and with ",[209,898,899],{},":goo=\"false\"",", it is a plain shadcn Checkbox, so first paint and hydration match.",[269,902,904],{"id":903},"accessibility","Accessibility",[206,906,907,908,250,910,913,914,917,918,921],{},"It's a real reka-ui checkbox: ",[209,909,266],{},[209,911,912],{},"aria-checked"," (",[209,915,916],{},"mixed"," when indeterminate), focus ring, Space to toggle. The goo layer is ",[209,919,920],{},"aria-hidden"," and can't be clicked.",[206,923,924,925,927],{},"Reduced motion keeps the goo shape and turns off the simulation: the box fills, or shows its bar, straight away, with no drop, splat, droplets, or suck-up. See ",[227,926,23],{"href":24},".",[929,930,931],"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":312,"searchDepth":354,"depth":354,"links":933},[934,935,936,937,938,939,940,941,942],{"id":271,"depth":347,"text":15},{"id":304,"depth":347,"text":305},{"id":495,"depth":347,"text":496},{"id":525,"depth":347,"text":526},{"id":659,"depth":347,"text":660},{"id":771,"depth":347,"text":772},{"id":830,"depth":347,"text":831},{"id":865,"depth":347,"text":866},{"id":903,"depth":347,"text":904},"shadcn's Checkbox where checking drops goo into the box. It splats, splashes, and sucks back up when you uncheck.","md",{},{"title":54,"description":943},"oD2ks2Dy9MUIpnbMfgoqz0oB7yGahvQZQNhuLtsFxhU",[949,951],{"title":50,"path":51,"stem":52,"description":950,"children":-1},"shadcn's Switch with a goo thumb. It stretches across the track, splats against the wall, and floods the track with color.",{"title":58,"path":59,"stem":60,"description":952,"children":-1},"shadcn's Radio Group where the selected dot is a blob of goo that stretches, flies, and splats onto the next item.",1793670386527]