https://nexara-nativeflow-docs.onrender.com/assets/js/eae48648.53c8bc45.js

1"use strict";(self.webpackChunk_nexara_nativeflow_docs=self.webpackChunk_nexara_nativeflow_docs||[]).push([[196],{8453:(e,d,t)=>{t.d(d,{R:()=>i,x:()=>l});var n=t(6540);const r={},s=n.createContext(r);function i(e){const d=n.useContext(s);return n.useMemo(function(){return"function"==typeof e?e(d):{...d,...e}},[d,e])}function l(e){let d;return d=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(s.Provider,{value:d},e.children)}},8917:(e,d,t)=>{t.r(d),t.d(d,{assets:()=>o,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"components/radio","title":"Radio","description":"&nbsp;","source":"@site/docs/components/radio.md","sourceDirName":"components","slug":"/components/radio","permalink":"/docs/components/radio","draft":false,"unlisted":false,"editUrl":"https://github.com/Yash-dott/nexara-nativeflow-docs/edit/main/docs/docs/components/radio.md","tags":[],"version":"current","frontMatter":{"title":"Radio","sidebar_label":"Radio *\u26a0\ufe0f\ud83e\uddea"},"sidebar":"tutorialSidebar","previous":{"title":"Progress","permalink":"/docs/components/progress"},"next":{"title":"Surface *\u26a0\ufe0f\ud83e\uddea","permalink":"/docs/components/surface"}}');var r=t(2467),s=t(8453);t(9030),t(3078);const i={title:"Radio",sidebar_label:"Radio *\u26a0\ufe0f\ud83e\uddea"},l=void 0,o={},c=[{value:"\xa0",id:"",level:3},{value:"\xa0",id:"-1",level:3},{value:"Implementation Code",id:"implementation-code",level:2},{value:"props",id:"props",level:2},{value:"RadioGroup",id:"radiogroup",level:3},{value:"RadioItem",id:"radioitem",level:3}];function a(e){const d={blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(d.h3,{id:"",children:"\xa0"}),"\n",(0,r.jsxs)(d.blockquote,{children:["\n",(0,r.jsxs)(d.p,{children:["\u26a0\ufe0f ",(0,r.jsx)(d.strong,{children:"Experimental Component"})]}),"\n",(0,r.jsx)(d.p,{children:"This component is still being evaluated and may change in future releases."}),"\n"]}),"\n",(0,r.jsx)(d.h3,{id:"-1",children:"\xa0"}),"\n","\n",(0,r.jsxs)(d.p,{children:[(0,r.jsx)(d.strong,{children:"RadioGroup"})," component renders a group of radio buttons, manages the selected value internally, and calls onSelect when a child radio button is pressed."]}),"\n",(0,r.jsx)(d.h2,{id:"implementation-code",children:"Implementation Code"}),"\n",(0,r.jsx)(d.pre,{children:(0,r.jsx)(d.code,{className:"language-jsx",children:"import { Radio } from '@nexara/nativeflow';\n\nconst Component = () => {\n  return (\n    <Radio.Group \n        defaultValue='others'\n        name='Gender'\n        onSelect={(name, value) => console.log(name, value)}\n    >\n        <Radio.Item \n            value='male'\n            label='Male'\n        />\n        <Radio.Item \n            value='female'\n            label='Female'\n        />\n        <Radio.Item \n            value='others'\n            label='Others'\n        />\n    </Radio.Group>\n  );\n};\n\nexport default Component;\n"})}),"\n",(0,r.jsx)(d.h2,{id:"props",children:"props"}),"\n",(0,r.jsx)(d.h3,{id:"radiogroup",children:"RadioGroup"}),"\n",(0,r.jsxs)(d.table,{children:[(0,r.jsx)(d.thead,{children:(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.th,{children:"Prop"}),(0,r.jsx)(d.th,{children:"Type"}),(0,r.jsx)(d.th,{children:"Default"}),(0,r.jsx)(d.th,{children:"Description"})]})}),(0,r.jsxs)(d.tbody,{children:[(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"name"})}),(0,r.jsx)(d.td,{children:"string"}),(0,r.jsx)(d.td,{}),(0,r.jsx)(d.td,{children:"Unique name for the radio group, useful for forms or multiple groups."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"defaultValue"})}),(0,r.jsx)(d.td,{children:"string"}),(0,r.jsx)(d.td,{}),(0,r.jsx)(d.td,{children:"Default selected value (uncontrolled usage)."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"value"})}),(0,r.jsx)(d.td,{children:"string"}),(0,r.jsx)(d.td,{}),(0,r.jsx)(d.td,{children:"Current selected value (controlled usage)."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"children"})}),(0,r.jsx)(d.td,{children:"ReactNode"}),(0,r.jsx)(d.td,{}),(0,r.jsx)(d.td,{children:"RadioItem components that belong to this group."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"onSelect"})}),(0,r.jsx)(d.td,{children:"function"}),(0,r.jsx)(d.td,{}

1),(0,r.jsxs)(d.td,{children:["Callback fired when a radio option is selected. Receives ",(0,r.jsx)(d.code,{children:"(name: string, value: string)"}),"."]})]})]})]}),"\n",(0,r.jsx)(d.hr,{}),"\n",(0,r.jsx)(d.h3,{id:"radioitem",children:"RadioItem"}),"\n",(0,r.jsxs)(d.table,{children:[(0,r.jsx)(d.thead,{children:(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.th,{children:"Prop"}),(0,r.jsx)(d.th,{children:"Type"}),(0,r.jsx)(d.th,{children:"Default"}),(0,r.jsx)(d.th,{children:"Description"})]})}),(0,r.jsxs)(d.tbody,{children:[(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"size"})}),(0,r.jsx)(d.td,{children:"number"}),(0,r.jsx)(d.td,{children:"22"}),(0,r.jsx)(d.td,{children:"Size of the radio circle."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"stroke"})}),(0,r.jsx)(d.td,{children:"number"}),(0,r.jsx)(d.td,{children:"2"}),(0,r.jsx)(d.td,{children:"Border width of the outer circle."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"color"})}),(0,r.jsx)(d.td,{children:"string"}),(0,r.jsx)(d.td,{}),(0,r.jsx)(d.td,{children:"Custom color for the radio item (defaults to theme color)."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"active"})}),(0,r.jsx)(d.td,{children:"boolean"}),(0,r.jsx)(d.td,{children:"false"}),(0,r.jsx)(d.td,{children:"Whether this radio item is selected."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"name"})}),(0,r.jsx)(d.td,{children:"string"}),(0,r.jsx)(d.td,{}),(0,r.jsx)(d.td,{children:"Unique name of the radio item (used in groups)."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"value"})}),(0,r.jsx)(d.td,{children:"string"}),(0,r.jsx)(d.td,{}),(0,r.jsx)(d.td,{children:"Value associated with this radio item."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"disabled"})}),(0,r.jsx)(d.td,{children:"boolean"}),(0,r.jsx)(d.td,{children:"false"}),(0,r.jsx)(d.td,{children:"If true, disables the radio item."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"label"})}),(0,r.jsx)(d.td,{children:"string"}),(0,r.jsx)(d.td,{}),(0,r.jsx)(d.td,{children:"Optional text label displayed beside the radio item."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"fs"})}),(0,r.jsx)(d.td,{children:"number"}),(0,r.jsx)(d.td,{}),(0,r.jsx)(d.td,{children:"Font size override for the label text."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"fScale"})}),(0,r.jsx)(d.td,{children:"TypographyScale"}),(0,r.jsx)(d.td,{children:"base"}),(0,r.jsx)(d.td,{children:"Typography scale for the label text."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"ff"})}),(0,r.jsx)(d.td,{children:"string"}),(0,r.jsx)(d.td,{}),(0,r.jsx)(d.td,{children:"Font family for the label text."})]}),(0,r.jsxs)(d.tr,{children:[(0,r.jsx)(d.td,{children:(0,r.jsx)(d.code,{children:"labelStyle"})}),(0,r.jsx)(d.td,{children:"StyledTextProps"}),(0,r.jsx)(d.td,{}),(0,r.jsx)(d.td,{children:"Additional style props for the label text."})]})]})]})]})}function h(e={}){const{wrapper:d}={...(0,s.R)(),...e.components};return d?(0,r.jsx)(d,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}}}]);