Option 1

Option 2

Option 3

); } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { RadioGroup } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" RadioStyleSizes"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"RadioGroup"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"flex items-center space-x-2"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"RadioGroup.Item"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"> Option 1"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"flex items-center space-x-2"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"RadioGroup.Item"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"2"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"> Option 2"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"flex items-center space-x-2"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"RadioGroup.Item"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"3"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"label"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" htmlFor"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"3"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"> Option 3"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h2,{id:"installation",children:"Installation"}),` `,(0,n.jsxs)(o,{children:[(0,n.jsx)(o.Cli,{children:(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,n.jsx)(l.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"https://retroui.dev/r/radio.json"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]})})})})}),(0,n.jsxs)(o.Manual,{children:[(0,n.jsx)(l.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,n.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,n.jsx)(l.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"npm"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" install"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-radio-group"}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:" class-variance-authority"})]})})})}),(0,n.jsx)(l.h4,{id:"2-copy-the-code--into-your-project",children:"2. Copy the code \u{1F447} into your project:"}),(0,n.jsx)(s,{name:"radio",children:(0,n.jsx)(l.figure,{__src__:"/retroui/components/ui/Radio.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#BF9EEE"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" RadioPrimitive "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-radio-group"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { cva, VariantProps } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"class-variance-authority"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" radioVariants "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" cva"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"border-black border-2"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variants"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' ""'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" outline"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' ""'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" solid"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' ""'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" sm"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" md"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-5 w-5"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" lg"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-6 w-6"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" defaultVariants"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"default"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"md"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"});"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" radioIndicatorVariants "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" cva"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"flex "}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variants"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"bg-primary border-2 border-black"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" outline"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"border-2 border-black"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" solid"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"bg-black"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" sm"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-2 w-2"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" md"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-2.5 w-2.5"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" lg"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-3.5 w-3.5"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" defaultVariants"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"default"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"md"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"});"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" RadioGroupProps"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" extends"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" RadioPrimitive.Root> {}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" RadioGroupRoot"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ({ "}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" RadioGroupProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"RadioPrimitive.Root"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"grid gap-2"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:", className)} {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props} />"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" RadioProps"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" extends"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" RadioPrimitive.Item>,"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" VariantProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"typeof"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" radioVariants> {}"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" RadioItem"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ({"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" children,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" size,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variant,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" RadioProps"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"RadioPrimitive.Item"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" radioVariants"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" size,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" variant,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" }),"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"RadioPrimitive.Indicator"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"flex justify-center items-center"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"radioIndicatorVariants"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"({ size, variant })}>"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {children}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" RadioComponent "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Object."}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:"assign"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"(RadioGroupRoot, {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Item"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" RadioItem,"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"});"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { RadioComponent "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" RadioGroup };"})]})]})})})})]})]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h2,{id:"examples",children:"Examples"}),` `,(0,n.jsx)(l.h3,{id:"variants",children:"Variants"}),` `,(0,n.jsx)(r,{name:"radio-style-variants",children:(0,n.jsx)(l.figure,{__src__:"preview/components/radio-style-variants.tsx",__rawString__:`import { RadioGroup } from "@/components/ui"; export default function RadioStyleVariants() { return (

Default Style

Outline Style

Solid Style

Small

Medium

Large Size