[{"data":1,"prerenderedAt":1166},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fradio-group":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fradio-group":1161},[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":58,"badge":13,"body":189,"description":1156,"extension":1157,"meta":1158,"navigation":379,"path":59,"seo":1159,"status":13,"stem":60,"__hash__":1160},"docs\u002Fdocs\u002F2.components\u002F06.radio-group.md",{"type":190,"value":191,"toc":1142},"minimark",[192,201,221,272,276,308,312,564,568,571,600,603,607,614,620,687,691,711,716,901,905,912,917,1007,1011,1022,1059,1063,1067,1070,1073,1091,1094,1100,1104,1107,1113,1117,1132,1138],[193,194,197],"playground",{"caption":195,"name":196},"Click an item, or focus the group and use the arrow keys.","radio-group",[198,199],"demo-radio-group",{"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 radio groups on this page are the real ",[209,218,219],{},"GoopRadioGroup",", and the code below is exactly what you write.",[206,222,223,212,225,228,229,238,239,242,243,246,247,238,250,238,253,238,256,238,259,238,262,238,265,238,268,271],{},[209,224,219],{},[209,226,227],{},"GoopRadioGroupItem"," wrap reka-ui's ",[230,231,235],"a",{"href":232,"rel":233},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fradio-group",[234],"nofollow",[209,236,237],{},"RadioGroupRoot",", ",[209,240,241],{},"RadioGroupItem",", and ",[209,244,245],{},"RadioGroupIndicator",", the same primitive as shadcn-vue's RadioGroup, with the same API and classes. ",[209,248,249],{},"v-model",[209,251,252],{},"orientation",[209,254,255],{},"loop",[209,257,258],{},"dir",[209,260,261],{},"disabled",[209,263,264],{},"name",[209,266,267],{},"required",[209,269,270],{},"asChild",", roving focus, and arrow-key selection all come from reka-ui. The goo is one layer on the group root.",[273,274,15],"h2",{"id":275},"installation",[206,277,278,279,281,282,284,285,289,290,212,292,294,295,238,298,238,301,238,304,307],{},"Install ",[209,280,215],{}," or ",[209,283,211],{}," as shown on the ",[230,286,288],{"href":287},"\u002Fdocs\u002Fcomponents\u002Fbutton#installation","Button page",". The Nuxt module auto-imports ",[209,291,219],{},[209,293,227],{},". It uses the same shadcn tokens as the plain Radio Group (",[209,296,297],{},"--primary",[209,299,300],{},"--primary-foreground",[209,302,303],{},"--input",[209,305,306],{},"--ring",").",[273,309,311],{"id":310},"usage","Usage",[313,314,319],"pre",{"className":315,"code":316,"language":317,"meta":318,"style":318},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\nimport { GoopRadioGroup, GoopRadioGroupItem } from '@goopui\u002Fvue'\n\nconst plan = ref('pro')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopRadioGroup v-model=\"plan\">\n    \u003Clabel v-for=\"p in ['free', 'pro', 'team']\" :key=\"p\" class=\"flex items-center gap-2 text-sm capitalize\">\n      \u003CGoopRadioGroupItem :id=\"`plan-${p}`\" :value=\"p\" \u002F>\n      {{ p }}\n    \u003C\u002Flabel>\n  \u003C\u002FGoopRadioGroup>\n\u003C\u002Ftemplate>\n","vue","",[209,320,321,351,358,374,381,406,416,421,431,454,489,529,535,545,555],{"__ignoreMap":318},[322,323,326,330,334,338,341,344,348],"span",{"class":324,"line":325},"line",1,[322,327,329],{"class":328},"sVt8B","\u003C",[322,331,333],{"class":332},"s9eBZ","script",[322,335,337],{"class":336},"sScJk"," setup",[322,339,340],{"class":336}," lang",[322,342,343],{"class":328},"=",[322,345,347],{"class":346},"sZZnC","\"ts\"",[322,349,350],{"class":328},">\n",[322,352,354],{"class":324,"line":353},2,[322,355,357],{"class":356},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[322,359,361,365,368,371],{"class":324,"line":360},3,[322,362,364],{"class":363},"szBVR","import",[322,366,367],{"class":328}," { GoopRadioGroup, GoopRadioGroupItem } ",[322,369,370],{"class":363},"from",[322,372,373],{"class":346}," '@goopui\u002Fvue'\n",[322,375,377],{"class":324,"line":376},4,[322,378,380],{"emptyLinePlaceholder":379},true,"\n",[322,382,384,387,391,394,397,400,403],{"class":324,"line":383},5,[322,385,386],{"class":363},"const",[322,388,390],{"class":389},"sj4cs"," plan",[322,392,393],{"class":363}," =",[322,395,396],{"class":336}," ref",[322,398,399],{"class":328},"(",[322,401,402],{"class":346},"'pro'",[322,404,405],{"class":328},")\n",[322,407,409,412,414],{"class":324,"line":408},6,[322,410,411],{"class":328},"\u003C\u002F",[322,413,333],{"class":332},[322,415,350],{"class":328},[322,417,419],{"class":324,"line":418},7,[322,420,380],{"emptyLinePlaceholder":379},[322,422,424,426,429],{"class":324,"line":423},8,[322,425,329],{"class":328},[322,427,428],{"class":332},"template",[322,430,350],{"class":328},[322,432,434,437,439,442,444,447,450,452],{"class":324,"line":433},9,[322,435,436],{"class":328},"  \u003C",[322,438,219],{"class":332},[322,440,441],{"class":336}," v-model",[322,443,343],{"class":328},[322,445,446],{"class":346},"\"",[322,448,449],{"class":328},"plan",[322,451,446],{"class":346},[322,453,350],{"class":328},[322,455,457,460,463,466,468,471,474,476,479,482,484,487],{"class":324,"line":456},10,[322,458,459],{"class":328},"    \u003C",[322,461,462],{"class":332},"label",[322,464,465],{"class":336}," v-for",[322,467,343],{"class":328},[322,469,470],{"class":346},"\"p in ['free', 'pro', 'team']\"",[322,472,473],{"class":336}," :key",[322,475,343],{"class":328},[322,477,478],{"class":346},"\"p\"",[322,480,481],{"class":336}," class",[322,483,343],{"class":328},[322,485,486],{"class":346},"\"flex items-center gap-2 text-sm capitalize\"",[322,488,350],{"class":328},[322,490,492,495,497,500,503,505,508,510,513,515,518,520,522,524,526],{"class":324,"line":491},11,[322,493,494],{"class":328},"      \u003C",[322,496,227],{"class":332},[322,498,499],{"class":328}," :",[322,501,502],{"class":336},"id",[322,504,343],{"class":328},[322,506,507],{"class":346},"\"`plan-${",[322,509,206],{"class":328},[322,511,512],{"class":346},"}`\"",[322,514,499],{"class":328},[322,516,517],{"class":336},"value",[322,519,343],{"class":328},[322,521,446],{"class":346},[322,523,206],{"class":328},[322,525,446],{"class":346},[322,527,528],{"class":328}," \u002F>\n",[322,530,532],{"class":324,"line":531},12,[322,533,534],{"class":328},"      {{ p }}\n",[322,536,538,541,543],{"class":324,"line":537},13,[322,539,540],{"class":328},"    \u003C\u002F",[322,542,462],{"class":332},[322,544,350],{"class":328},[322,546,548,551,553],{"class":324,"line":547},14,[322,549,550],{"class":328},"  \u003C\u002F",[322,552,219],{"class":332},[322,554,350],{"class":328},[322,556,558,560,562],{"class":324,"line":557},15,[322,559,411],{"class":328},[322,561,428],{"class":332},[322,563,350],{"class":328},[273,565,567],{"id":566},"what-it-does","What it does",[206,569,570],{},"Selecting a different item moves one blob of goo from the old item to the new one:",[572,573,574,582,588,594],"ul",{},[575,576,577,581],"li",{},[578,579,580],"strong",{},"bridge."," The blob stretches out of the old item on a fat goo bridge. The bridge snaps.",[575,583,584,587],{},[578,585,586],{},"Flight."," It flies to the new item, stretched along its path with a teardrop tail. It makes a small hop on sideways jumps.",[575,589,590,593],{},[578,591,592],{},"splat."," It lands flat along the flight, bulging across it, then rebounds and wobbles.",[575,595,596,599],{},[578,597,598],{},"droplets."," A few drops splash off the landing.",[206,601,602],{},"The dot is the same unfiltered one shadcn renders. It is held back until the splat has mostly settled. The animation works in any direction, so keyboard selection animates too.",[273,604,606],{"id":605},"horizontal","Horizontal",[206,608,609,610,613],{},"Set ",[209,611,612],{},"orientation=\"horizontal\""," and lay the group out yourself, as with shadcn:",[615,616,618],"preview",{":controls":617},"false",[198,619],{"set":605},[313,621,623],{"className":315,"code":622,"language":317,"meta":318,"style":318},"\u003CGoopRadioGroup v-model=\"size\" orientation=\"horizontal\" class=\"flex gap-6\">\n  \u003Clabel v-for=\"s in ['s', 'm', 'l', 'xl']\" :key=\"s\" class=\"flex items-center gap-2 text-sm uppercase\">\n    \u003CGoopRadioGroupItem :id=\"`size-${s}`\" :value=\"s\" \u002F>\n    {{ s }}\n  \u003C\u002Flabel>\n\u003C\u002FGoopRadioGroup>\n",[209,624,625,659,664,669,674,679],{"__ignoreMap":318},[322,626,627,629,631,633,635,637,640,642,645,647,650,652,654,657],{"class":324,"line":325},[322,628,329],{"class":328},[322,630,219],{"class":332},[322,632,441],{"class":336},[322,634,343],{"class":328},[322,636,446],{"class":346},[322,638,639],{"class":328},"size",[322,641,446],{"class":346},[322,643,644],{"class":336}," orientation",[322,646,343],{"class":328},[322,648,649],{"class":346},"\"horizontal\"",[322,651,481],{"class":336},[322,653,343],{"class":328},[322,655,656],{"class":346},"\"flex gap-6\"",[322,658,350],{"class":328},[322,660,661],{"class":324,"line":353},[322,662,663],{"class":328},"  \u003Clabel v-for=\"s in ['s', 'm', 'l', 'xl']\" :key=\"s\" class=\"flex items-center gap-2 text-sm uppercase\">\n",[322,665,666],{"class":324,"line":360},[322,667,668],{"class":328},"    \u003CGoopRadioGroupItem :id=\"`size-${s}`\" :value=\"s\" \u002F>\n",[322,670,671],{"class":324,"line":376},[322,672,673],{"class":328},"    {{ s }}\n",[322,675,676],{"class":324,"line":383},[322,677,678],{"class":328},"  \u003C\u002Flabel>\n",[322,680,681,683,685],{"class":324,"line":408},[322,682,411],{"class":328},[322,684,219],{"class":332},[322,686,350],{"class":328},[273,688,690],{"id":689},"effects-presets-and-sizes","Effects, presets, and sizes",[206,692,693,694,696,697,699,700,703,704,707,708,710],{},"The goo props go on ",[209,695,219],{},". Each effect takes ",[209,698,617],{}," (off), ",[209,701,702],{},"true"," (the preset's strength), or a number that scales it (",[209,705,706],{},"0"," is off). The item size is a class on ",[209,709,227],{},", as in shadcn, and the blob follows it.",[615,712,713],{":controls":617},[198,714],{"set":715},"features",[313,717,719],{"className":315,"code":718,"language":317,"meta":318,"style":318},"\u003C!-- No bridge -->\n\u003CGoopRadioGroup default-value=\"a\" orientation=\"horizontal\" class=\"flex gap-6\" :bridge=\"false\">\n  \u003CGoopRadioGroupItem value=\"a\" \u002F>\n  \u003CGoopRadioGroupItem value=\"b\" \u002F>\n  \u003CGoopRadioGroupItem value=\"c\" \u002F>\n\u003C\u002FGoopRadioGroup>\n\n\u003C!-- Wild -->\n\u003CGoopRadioGroup default-value=\"a\" orientation=\"horizontal\" class=\"flex gap-6\" preset=\"wild\">\n  ...\n\u003C\u002FGoopRadioGroup>\n\n\u003C!-- Bigger items -->\n\u003CGoopRadioGroup default-value=\"a\" orientation=\"horizontal\" class=\"flex gap-10\">\n  \u003CGoopRadioGroupItem value=\"a\" class=\"size-7\" \u002F>\n  ...\n\u003C\u002FGoopRadioGroup>\n",[209,720,721,726,767,772,777,782,790,794,799,833,838,846,850,855,882,887,892],{"__ignoreMap":318},[322,722,723],{"class":324,"line":325},[322,724,725],{"class":356},"\u003C!-- No bridge -->\n",[322,727,728,730,732,735,737,740,742,744,746,748,750,752,754,757,759,761,763,765],{"class":324,"line":353},[322,729,329],{"class":328},[322,731,219],{"class":332},[322,733,734],{"class":336}," default-value",[322,736,343],{"class":328},[322,738,739],{"class":346},"\"a\"",[322,741,644],{"class":336},[322,743,343],{"class":328},[322,745,649],{"class":346},[322,747,481],{"class":336},[322,749,343],{"class":328},[322,751,656],{"class":346},[322,753,499],{"class":328},[322,755,756],{"class":336},"bridge",[322,758,343],{"class":328},[322,760,446],{"class":346},[322,762,617],{"class":389},[322,764,446],{"class":346},[322,766,350],{"class":328},[322,768,769],{"class":324,"line":360},[322,770,771],{"class":328},"  \u003CGoopRadioGroupItem value=\"a\" \u002F>\n",[322,773,774],{"class":324,"line":376},[322,775,776],{"class":328},"  \u003CGoopRadioGroupItem value=\"b\" \u002F>\n",[322,778,779],{"class":324,"line":383},[322,780,781],{"class":328},"  \u003CGoopRadioGroupItem value=\"c\" \u002F>\n",[322,783,784,786,788],{"class":324,"line":408},[322,785,411],{"class":328},[322,787,219],{"class":332},[322,789,350],{"class":328},[322,791,792],{"class":324,"line":418},[322,793,380],{"emptyLinePlaceholder":379},[322,795,796],{"class":324,"line":423},[322,797,798],{"class":356},"\u003C!-- Wild -->\n",[322,800,801,803,805,807,809,811,813,815,817,819,821,823,826,828,831],{"class":324,"line":433},[322,802,329],{"class":328},[322,804,219],{"class":332},[322,806,734],{"class":336},[322,808,343],{"class":328},[322,810,739],{"class":346},[322,812,644],{"class":336},[322,814,343],{"class":328},[322,816,649],{"class":346},[322,818,481],{"class":336},[322,820,343],{"class":328},[322,822,656],{"class":346},[322,824,825],{"class":336}," preset",[322,827,343],{"class":328},[322,829,830],{"class":346},"\"wild\"",[322,832,350],{"class":328},[322,834,835],{"class":324,"line":456},[322,836,837],{"class":328},"  ...\n",[322,839,840,842,844],{"class":324,"line":491},[322,841,411],{"class":328},[322,843,219],{"class":332},[322,845,350],{"class":328},[322,847,848],{"class":324,"line":531},[322,849,380],{"emptyLinePlaceholder":379},[322,851,852],{"class":324,"line":537},[322,853,854],{"class":356},"\u003C!-- Bigger items -->\n",[322,856,857,859,861,863,865,867,869,871,873,875,877,880],{"class":324,"line":547},[322,858,329],{"class":328},[322,860,219],{"class":332},[322,862,734],{"class":336},[322,864,343],{"class":328},[322,866,739],{"class":346},[322,868,644],{"class":336},[322,870,343],{"class":328},[322,872,649],{"class":346},[322,874,481],{"class":336},[322,876,343],{"class":328},[322,878,879],{"class":346},"\"flex gap-10\"",[322,881,350],{"class":328},[322,883,884],{"class":324,"line":557},[322,885,886],{"class":328},"  \u003CGoopRadioGroupItem value=\"a\" class=\"size-7\" \u002F>\n",[322,888,890],{"class":324,"line":889},16,[322,891,837],{"class":328},[322,893,895,897,899],{"class":324,"line":894},17,[322,896,411],{"class":328},[322,898,219],{"class":332},[322,900,350],{"class":328},[273,902,904],{"id":903},"disabled-and-goo-off","Disabled and goo off",[206,906,907,908,911],{},"A disabled item is shadcn's: dimmed, and it can't be selected. ",[209,909,910],{},":goo=\"false\""," on the group renders a plain shadcn Radio Group.",[615,913,914],{":controls":617},[198,915],{"set":916},"states",[313,918,920],{"className":315,"code":919,"language":317,"meta":318,"style":318},"\u003CGoopRadioGroup default-value=\"one\">\n  \u003CGoopRadioGroupItem value=\"one\" \u002F>\n  \u003CGoopRadioGroupItem value=\"two\" \u002F>\n  \u003CGoopRadioGroupItem value=\"three\" disabled \u002F>\n\u003C\u002FGoopRadioGroup>\n\n\u003CGoopRadioGroup default-value=\"a\" :goo=\"false\">\n  \u003CGoopRadioGroupItem value=\"a\" \u002F>\n  \u003CGoopRadioGroupItem value=\"b\" \u002F>\n\u003C\u002FGoopRadioGroup>\n",[209,921,922,937,942,947,952,960,964,991,995,999],{"__ignoreMap":318},[322,923,924,926,928,930,932,935],{"class":324,"line":325},[322,925,329],{"class":328},[322,927,219],{"class":332},[322,929,734],{"class":336},[322,931,343],{"class":328},[322,933,934],{"class":346},"\"one\"",[322,936,350],{"class":328},[322,938,939],{"class":324,"line":353},[322,940,941],{"class":328},"  \u003CGoopRadioGroupItem value=\"one\" \u002F>\n",[322,943,944],{"class":324,"line":360},[322,945,946],{"class":328},"  \u003CGoopRadioGroupItem value=\"two\" \u002F>\n",[322,948,949],{"class":324,"line":376},[322,950,951],{"class":328},"  \u003CGoopRadioGroupItem value=\"three\" disabled \u002F>\n",[322,953,954,956,958],{"class":324,"line":383},[322,955,411],{"class":328},[322,957,219],{"class":332},[322,959,350],{"class":328},[322,961,962],{"class":324,"line":408},[322,963,380],{"emptyLinePlaceholder":379},[322,965,966,968,970,972,974,976,978,981,983,985,987,989],{"class":324,"line":418},[322,967,329],{"class":328},[322,969,219],{"class":332},[322,971,734],{"class":336},[322,973,343],{"class":328},[322,975,739],{"class":346},[322,977,499],{"class":328},[322,979,980],{"class":336},"goo",[322,982,343],{"class":328},[322,984,446],{"class":346},[322,986,617],{"class":389},[322,988,446],{"class":346},[322,990,350],{"class":328},[322,992,993],{"class":324,"line":423},[322,994,771],{"class":328},[322,996,997],{"class":324,"line":433},[322,998,776],{"class":328},[322,1000,1001,1003,1005],{"class":324,"line":456},[322,1002,411],{"class":328},[322,1004,219],{"class":332},[322,1006,350],{"class":328},[273,1008,1010],{"id":1009},"colors","Colors",[206,1012,1013,1014,1017,1018,1021],{},"The blob uses the ",[209,1015,1016],{},"--goop-radio-fill"," variable on the group, which defaults to ",[209,1019,1020],{},"var(--primary)",", the color shadcn fills the checked item with. Override it on the group or an ancestor:",[313,1023,1025],{"className":315,"code":1024,"language":317,"meta":318,"style":318},"\u003CGoopRadioGroup class=\"[--goop-radio-fill:var(--color-emerald-500)]\">\n  \u003CGoopRadioGroupItem value=\"a\" class=\"data-checked:border-emerald-500\" \u002F>\n  ...\n\u003C\u002FGoopRadioGroup>\n",[209,1026,1027,1042,1047,1051],{"__ignoreMap":318},[322,1028,1029,1031,1033,1035,1037,1040],{"class":324,"line":325},[322,1030,329],{"class":328},[322,1032,219],{"class":332},[322,1034,481],{"class":336},[322,1036,343],{"class":328},[322,1038,1039],{"class":346},"\"[--goop-radio-fill:var(--color-emerald-500)]\"",[322,1041,350],{"class":328},[322,1043,1044],{"class":324,"line":353},[322,1045,1046],{"class":328},"  \u003CGoopRadioGroupItem value=\"a\" class=\"data-checked:border-emerald-500\" \u002F>\n",[322,1048,1049],{"class":324,"line":360},[322,1050,837],{"class":328},[322,1052,1053,1055,1057],{"class":324,"line":376},[322,1054,411],{"class":328},[322,1056,219],{"class":332},[322,1058,350],{"class":328},[273,1060,1062],{"id":1061},"props","Props",[1064,1065,219],"h3",{"id":1066},"goopradiogroup",[206,1068,1069],{},"Keeps the shadcn-vue RadioGroup API and adds the goo props.",[1071,1072],"component-props",{"name":196},[206,1074,1075,1076,1079,1080,1083,1084,1086,1087,1090],{},"It exposes ",[209,1077,1078],{},"handle"," (the live radio group handle, ",[209,1081,1082],{},"null"," before mount or with ",[209,1085,980],{}," off) and ",[209,1088,1089],{},"el"," (the root).",[1064,1092,227],{"id":1093},"goopradiogroupitem",[206,1095,1096,1097,1099],{},"Keeps the shadcn-vue RadioGroupItem API. It has no goo props of its own. Inside an active ",[209,1098,219],{},", the checked item drops its own fill, because the group's blob is the fill.",[1071,1101],{"name":196,"part":1102},[1103],"item",[206,1105,1106],{},"The default slot replaces the dot.",[206,1108,1109,1110,1112],{},"Before it mounts, during SSR, and with ",[209,1111,910],{},", it is a plain shadcn Radio Group, so first paint and hydration match.",[273,1114,1116],{"id":1115},"accessibility","Accessibility",[206,1118,1119,1120,1123,1124,1127,1128,1131],{},"It's a real reka-ui radio group: ",[209,1121,1122],{},"role=\"radiogroup\""," with ",[209,1125,1126],{},"role=\"radio\""," items, roving focus, and arrow keys that move and select. The goo layer is ",[209,1129,1130],{},"aria-hidden"," and can't be clicked.",[206,1133,1134,1135,1137],{},"Reduced motion keeps the goo shape and turns off the simulation: the blob sits on the selected item straight away, with no bridge, flight, splat, or droplets. See ",[230,1136,23],{"href":24},".",[1139,1140,1141],"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":318,"searchDepth":360,"depth":360,"links":1143},[1144,1145,1146,1147,1148,1149,1150,1151,1155],{"id":275,"depth":353,"text":15},{"id":310,"depth":353,"text":311},{"id":566,"depth":353,"text":567},{"id":605,"depth":353,"text":606},{"id":689,"depth":353,"text":690},{"id":903,"depth":353,"text":904},{"id":1009,"depth":353,"text":1010},{"id":1061,"depth":353,"text":1062,"children":1152},[1153,1154],{"id":1066,"depth":360,"text":219},{"id":1093,"depth":360,"text":227},{"id":1115,"depth":353,"text":1116},"shadcn's Radio Group where the selected dot is a blob of goo that stretches, flies, and splats onto the next item.","md",{},{"title":58,"description":1156},"-SIhoILv3sV0MKQQXn29IKKUL4JV10lM7YNaU2HXMaQ",[1162,1164],{"title":54,"path":55,"stem":56,"description":1163,"children":-1},"shadcn's Checkbox where checking drops goo into the box. It splats, splashes, and sucks back up when you uncheck.",{"title":62,"path":63,"stem":64,"description":1165,"children":-1},"shadcn's Input and Textarea with a goo focus ring. It flows around the border from where you clicked, ripples as you type, and drains away on blur.",1793670386527]