[{"data":1,"prerenderedAt":845},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-radio":12,"i-ph:code":843},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":836,"extension":837,"meta":838,"navigation":124,"path":839,"seo":840,"stem":841,"__hash__":842},"docs\u002Fdocs\u002Fcomponents\u002Fradio.md","Radio",{"type":16,"value":17,"toc":827},"minimark",[18,22,31,335,340,438,442,472,476,508,513,522,596,609,740,744,755,786,790,793,823],[19,20,14],"h1",{"id":21},"radio",[23,24,25,26,30],"p",{},"The Radio component is a form control that allows users to select a single option from a list of choices. It can be used individually or as part of a ",[27,28,29],"code",{},"RadioGroup"," for managing multiple related options.",[32,33,35],"radio-example",{"source-path":34},"Radio\u002FRadio.vue",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Radio, RadioGroup } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst selected = ref('option1')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CRadioGroup v-model=\"selected\" gap=\"xl\" x-center>\n    \u003CRadio value=\"option1\" label=\"Option 1\" \u002F>\n    \u003CRadio value=\"option2\" label=\"Option 2\" \u002F>\n    \u003CRadio value=\"option3\" label=\"Option 3\" \u002F>\n  \u003C\u002FRadioGroup>\n\u003C\u002Ftemplate>\n","vue","",[27,43,44,64,99,119,126,156,166,171,181,220,254,285,316,326],{"__ignoreMap":41},[45,46,49,53,57,61],"span",{"class":47,"line":48},"line",1,[45,50,52],{"class":51},"sP76a","\u003C",[45,54,56],{"class":55},"sKpE2","script",[45,58,60],{"class":59},"sflEz"," setup",[45,62,63],{"class":51},">\n",[45,65,67,70,73,76,79,82,85,88,92,96],{"class":47,"line":66},2,[45,68,69],{"class":55},"import",[45,71,72],{"class":51}," {",[45,74,75],{"class":59}," Radio",[45,77,78],{"class":51},",",[45,80,81],{"class":59}," RadioGroup",[45,83,84],{"class":51}," }",[45,86,87],{"class":55}," from",[45,89,91],{"class":90},"sBR95"," '",[45,93,95],{"class":94},"sfmH-","@dolanske\u002Fvui",[45,97,98],{"class":90},"'\n",[45,100,102,104,106,109,111,113,115,117],{"class":47,"line":101},3,[45,103,69],{"class":55},[45,105,72],{"class":51},[45,107,108],{"class":59}," ref",[45,110,84],{"class":51},[45,112,87],{"class":55},[45,114,91],{"class":90},[45,116,40],{"class":94},[45,118,98],{"class":90},[45,120,122],{"class":47,"line":121},4,[45,123,125],{"emptyLinePlaceholder":124},true,"\n",[45,127,129,133,136,139,142,145,148,151,153],{"class":47,"line":128},5,[45,130,132],{"class":131},"sCMWV","const",[45,134,135],{"class":59}," selected",[45,137,138],{"class":51}," =",[45,140,108],{"class":141},"sRTv0",[45,143,144],{"class":51},"(",[45,146,147],{"class":90},"'",[45,149,150],{"class":94},"option1",[45,152,147],{"class":90},[45,154,155],{"class":51},")\n",[45,157,159,162,164],{"class":47,"line":158},6,[45,160,161],{"class":51},"\u003C\u002F",[45,163,56],{"class":55},[45,165,63],{"class":51},[45,167,169],{"class":47,"line":168},7,[45,170,125],{"emptyLinePlaceholder":124},[45,172,174,176,179],{"class":47,"line":173},8,[45,175,52],{"class":51},[45,177,178],{"class":55},"template",[45,180,63],{"class":51},[45,182,184,187,189,192,195,198,201,203,206,208,210,213,215,218],{"class":47,"line":183},9,[45,185,186],{"class":51},"  \u003C",[45,188,29],{"class":55},[45,190,191],{"class":59}," v-model",[45,193,194],{"class":51},"=",[45,196,197],{"class":90},"\"",[45,199,200],{"class":94},"selected",[45,202,197],{"class":90},[45,204,205],{"class":59}," gap",[45,207,194],{"class":51},[45,209,197],{"class":90},[45,211,212],{"class":94},"xl",[45,214,197],{"class":90},[45,216,217],{"class":59}," x-center",[45,219,63],{"class":51},[45,221,223,226,228,231,233,235,237,239,242,244,246,249,251],{"class":47,"line":222},10,[45,224,225],{"class":51},"    \u003C",[45,227,14],{"class":55},[45,229,230],{"class":59}," value",[45,232,194],{"class":51},[45,234,197],{"class":90},[45,236,150],{"class":94},[45,238,197],{"class":90},[45,240,241],{"class":59}," label",[45,243,194],{"class":51},[45,245,197],{"class":90},[45,247,248],{"class":94},"Option 1",[45,250,197],{"class":90},[45,252,253],{"class":51}," \u002F>\n",[45,255,257,259,261,263,265,267,270,272,274,276,278,281,283],{"class":47,"line":256},11,[45,258,225],{"class":51},[45,260,14],{"class":55},[45,262,230],{"class":59},[45,264,194],{"class":51},[45,266,197],{"class":90},[45,268,269],{"class":94},"option2",[45,271,197],{"class":90},[45,273,241],{"class":59},[45,275,194],{"class":51},[45,277,197],{"class":90},[45,279,280],{"class":94},"Option 2",[45,282,197],{"class":90},[45,284,253],{"class":51},[45,286,288,290,292,294,296,298,301,303,305,307,309,312,314],{"class":47,"line":287},12,[45,289,225],{"class":51},[45,291,14],{"class":55},[45,293,230],{"class":59},[45,295,194],{"class":51},[45,297,197],{"class":90},[45,299,300],{"class":94},"option3",[45,302,197],{"class":90},[45,304,241],{"class":59},[45,306,194],{"class":51},[45,308,197],{"class":90},[45,310,311],{"class":94},"Option 3",[45,313,197],{"class":90},[45,315,253],{"class":51},[45,317,319,322,324],{"class":47,"line":318},13,[45,320,321],{"class":51},"  \u003C\u002F",[45,323,29],{"class":55},[45,325,63],{"class":51},[45,327,329,331,333],{"class":47,"line":328},14,[45,330,161],{"class":51},[45,332,178],{"class":55},[45,334,63],{"class":51},[336,337,339],"h3",{"id":338},"props","Props",[341,342,343,359],"table",{},[344,345,346],"thead",{},[347,348,349,353,356],"tr",{},[350,351,352],"th",{},"Name",[350,354,355],{},"Default",[350,357,358],{},"Type",[360,361,362,383,400,420],"tbody",{},[347,363,364,370,373],{},[365,366,367],"td",{},[27,368,369],{},"value",[365,371,372],{},"—",[365,374,375,378,379,382],{},[27,376,377],{},"any"," ",[380,381],"br",{}," The value of the radio button",[347,384,385,390,392],{},[365,386,387],{},[27,388,389],{},"label",[365,391,372],{},[365,393,394,378,397,399],{},[27,395,396],{},"string",[380,398],{}," The label text for the radio button",[347,401,402,407,412],{},[365,403,404],{},[27,405,406],{},"disabled",[365,408,409],{},[27,410,411],{},"false",[365,413,414,378,417,419],{},[27,415,416],{},"boolean",[380,418],{}," Whether the radio button is disabled",[347,421,422,427,431],{},[365,423,424],{},[27,425,426],{},"accent",[365,428,429],{},[27,430,411],{},[365,432,433,378,435,437],{},[27,434,416],{},[380,436],{}," Whether to use the accent color",[336,439,441],{"id":440},"events","Events",[341,443,444,456],{},[344,445,446],{},[347,447,448,450,453],{},[350,449,352],{},[350,451,452],{},"Payload",[350,454,455],{},"Description",[360,457,458],{},[347,459,460,465,469],{},[365,461,462],{},[27,463,464],{},"change",[365,466,467],{},[27,468,377],{},[365,470,471],{},"Emitted when the selected value changes",[336,473,475],{"id":474},"slots","Slots",[341,477,478,489],{},[344,479,480],{},[347,481,482,484,487],{},[350,483,352],{},[350,485,486],{},"Accepts",[350,488,455],{},[360,490,491],{},[347,492,493,498,502],{},[365,494,495],{},[27,496,497],{},"default",[365,499,500],{},[27,501,377],{},[365,503,504,505,507],{},"Content to be displayed as the label (overrides the ",[27,506,389],{}," prop if provided)",[509,510,512],"h2",{"id":511},"single-vs-grouped","Single vs Grouped",[23,514,515,516,518,519,521],{},"The ",[27,517,14],{}," component can be used individually or grouped together within a ",[27,520,29],{},".",[36,523,525],{"className":38,"code":524,"language":40,"meta":41,"style":41},"\u003Ctemplate>\n  \u003CRadio\n    v-model=\"selected\"\n    value=\"option1\"\n    label=\"Single Option\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[27,526,527,535,542,556,569,583,588],{"__ignoreMap":41},[45,528,529,531,533],{"class":47,"line":48},[45,530,52],{"class":51},[45,532,178],{"class":55},[45,534,63],{"class":51},[45,536,537,539],{"class":47,"line":66},[45,538,186],{"class":51},[45,540,541],{"class":55},"Radio\n",[45,543,544,547,549,551,553],{"class":47,"line":101},[45,545,546],{"class":59},"    v-model",[45,548,194],{"class":51},[45,550,197],{"class":90},[45,552,200],{"class":94},[45,554,555],{"class":90},"\"\n",[45,557,558,561,563,565,567],{"class":47,"line":121},[45,559,560],{"class":59},"    value",[45,562,194],{"class":51},[45,564,197],{"class":90},[45,566,150],{"class":94},[45,568,555],{"class":90},[45,570,571,574,576,578,581],{"class":47,"line":128},[45,572,573],{"class":59},"    label",[45,575,194],{"class":51},[45,577,197],{"class":90},[45,579,580],{"class":94},"Single Option",[45,582,555],{"class":90},[45,584,585],{"class":47,"line":158},[45,586,587],{"class":51},"  \u002F>\n",[45,589,590,592,594],{"class":47,"line":168},[45,591,161],{"class":51},[45,593,178],{"class":55},[45,595,63],{"class":51},[23,597,598,599,602,603,605,606,608],{},"When grouping, do not put ",[27,600,601],{},"v-model"," on the individual ",[27,604,14],{}," components, but instead use the wrapper ",[27,607,29],{}," to control the selected value.",[36,610,612],{"className":38,"code":611,"language":40,"meta":41,"style":41},"\u003Ctemplate>\n  \u003CRadioGroup v-model=\"selected\">\n    \u003CRadio value=\"option1\" label=\"Option 1\" \u002F>\n    \u003CRadio value=\"option2\" label=\"Option 2\" \u002F>\n    \u003CRadio value=\"option3\" label=\"Option 3\" \u002F>\n  \u003C\u002FRadioGroup>\n\u003C\u002Ftemplate>\n",[27,613,614,622,640,668,696,724,732],{"__ignoreMap":41},[45,615,616,618,620],{"class":47,"line":48},[45,617,52],{"class":51},[45,619,178],{"class":55},[45,621,63],{"class":51},[45,623,624,626,628,630,632,634,636,638],{"class":47,"line":66},[45,625,186],{"class":51},[45,627,29],{"class":55},[45,629,191],{"class":59},[45,631,194],{"class":51},[45,633,197],{"class":90},[45,635,200],{"class":94},[45,637,197],{"class":90},[45,639,63],{"class":51},[45,641,642,644,646,648,650,652,654,656,658,660,662,664,666],{"class":47,"line":101},[45,643,225],{"class":51},[45,645,14],{"class":55},[45,647,230],{"class":59},[45,649,194],{"class":51},[45,651,197],{"class":90},[45,653,150],{"class":94},[45,655,197],{"class":90},[45,657,241],{"class":59},[45,659,194],{"class":51},[45,661,197],{"class":90},[45,663,248],{"class":94},[45,665,197],{"class":90},[45,667,253],{"class":51},[45,669,670,672,674,676,678,680,682,684,686,688,690,692,694],{"class":47,"line":121},[45,671,225],{"class":51},[45,673,14],{"class":55},[45,675,230],{"class":59},[45,677,194],{"class":51},[45,679,197],{"class":90},[45,681,269],{"class":94},[45,683,197],{"class":90},[45,685,241],{"class":59},[45,687,194],{"class":51},[45,689,197],{"class":90},[45,691,280],{"class":94},[45,693,197],{"class":90},[45,695,253],{"class":51},[45,697,698,700,702,704,706,708,710,712,714,716,718,720,722],{"class":47,"line":128},[45,699,225],{"class":51},[45,701,14],{"class":55},[45,703,230],{"class":59},[45,705,194],{"class":51},[45,707,197],{"class":90},[45,709,300],{"class":94},[45,711,197],{"class":90},[45,713,241],{"class":59},[45,715,194],{"class":51},[45,717,197],{"class":90},[45,719,311],{"class":94},[45,721,197],{"class":90},[45,723,253],{"class":51},[45,725,726,728,730],{"class":47,"line":158},[45,727,321],{"class":51},[45,729,29],{"class":55},[45,731,63],{"class":51},[45,733,734,736,738],{"class":47,"line":168},[45,735,161],{"class":51},[45,737,178],{"class":55},[45,739,63],{"class":51},[336,741,743],{"id":742},"radiogroup-props","RadioGroup Props",[23,745,515,746,748,749,754],{},[27,747,29],{}," component wraps its slot in a ",[750,751,753],"a",{"href":752},"\u002Fdocs\u002Fcomponents\u002Fflex","Flex"," component and also accepts all of its props to properly position the contents.",[341,756,757,767],{},[344,758,759],{},[347,760,761,763,765],{},[350,762,352],{},[350,764,355],{},[350,766,358],{},[360,768,769],{},[347,770,771,775,779],{},[365,772,773],{},[27,774,406],{},[365,776,777],{},[27,778,411],{},[365,780,781,378,783,785],{},[27,782,416],{},[380,784],{}," Whether all radio buttons in the group are disabled",[336,787,789],{"id":788},"tokens","Tokens",[23,791,792],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[341,794,795,806],{},[344,796,797],{},[347,798,799,802,804],{},[350,800,801],{},"Token",[350,803,355],{},[350,805,455],{},[360,807,808],{},[347,809,810,815,820],{},[365,811,812],{},[27,813,814],{},"--vui-radio-size",[365,816,817],{},[27,818,819],{},"24px",[365,821,822],{},"Radio button size",[824,825,826],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sCMWV, html code.shiki .sCMWV{--shiki-dark:#CB7676;--shiki-light:#AB5959;--shiki-default:#CB7676}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}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);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":41,"searchDepth":66,"depth":66,"links":828},[829,830,831,832],{"id":338,"depth":101,"text":339},{"id":440,"depth":101,"text":441},{"id":474,"depth":101,"text":475},{"id":511,"depth":66,"text":512,"children":833},[834,835],{"id":742,"depth":101,"text":743},{"id":788,"depth":101,"text":789},"The Radio component is a form control that allows users to select a single option from a list of choices. It can be used individually or as part of a RadioGroup for managing multiple related options.","md",{},"\u002Fdocs\u002Fcomponents\u002Fradio",{"title":14,"description":836},"docs\u002Fcomponents\u002Fradio","i6VNbAOPEaStXW8CP6H27ZZH_hh6wChEyVr664NhC2M",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":844},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200883141]