https://superset-docs-preview.netlify.app/assets/js/ce3b75c8.219e6838.js

1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1554"],{740594(e,t,n){n.r(t),n.d(t,{metadata:()=>r,default:()=>h,frontMatter:()=>a,contentTitle:()=>d,toc:()=>c,assets:()=>s});var r=JSON.parse('{"id":"components/ui/radio","title":"Radio","description":"\x3c!--","source":"@site/developer_docs/components/ui/radio.mdx","sourceDirName":"components/ui","slug":"/components/ui/radio","permalink":"/developer-docs/components/ui/radio","draft":false,"unlisted":false,"editUrl":"https://github.com/apache/superset/edit/master/docs/developer_docs/developer_docs/components/ui/radio.mdx","tags":[],"version":"current","lastUpdatedBy":"\u0110\u1ED7 Tr\u1ECDng H\u1EA3i","lastUpdatedAt":1777279553000,"frontMatter":{"title":"Radio","sidebar_label":"Radio"},"sidebar":"DeveloperPortalSidebar","previous":{"title":"ProgressBar","permalink":"/developer-docs/components/ui/progressbar"},"next":{"title":"SafeMarkdown","permalink":"/developer-docs/components/ui/safemarkdown"}}'),o=n(474848),i=n(28453),l=n(771887);let a={title:"Radio",sidebar_label:"Radio"},d="Radio",s={},c=[{value:"Live Example",id:"live-example",level:2},{value:"Try It",id:"try-it",level:2},{value:"Radio Button Variants",id:"radio-button-variants",level:2},{value:"Vertical Radio Group",id:"vertical-radio-group",level:2},{value:"Props",id:"props",level:2},{value:"Import",id:"import",level:2}];function p(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",hr:"hr",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"radio",children:"Radio"})}),"\n",(0,o.jsx)(t.p,{children:"Radio button component for selecting one option from a set. Supports standalone radio buttons, radio buttons styled as buttons, and grouped radio buttons with layout configuration."}),"\n",(0,o.jsx)(t.h2,{id:"live-example",children:"Live Example"}),"\n",(0,o.jsx)(l.ec,{component:"Radio",props:{value:"radio1",disabled:!1,checked:!1,children:"Radio"},controls:[{name:"value",label:"Value",type:"text",description:"The value associated with this radio button."},{name:"disabled",label:"Disabled",type:"boolean",description:"Whether the radio button is disabled."},{name:"checked",label:"Checked",type:"boolean",description:"Whether the radio button is checked (controlled mode)."},{name:"children",label:"Children",type:"text",description:"Label text displayed next to the radio button."}]}),"\n",(0,o.jsx)(t.h2,{id:"try-it",children:"Try It"}),"\n",(0,o.jsx)(t.p,{children:"Edit the code below to experiment with the component:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:"live",live:!0,children:'function Demo() {\n  return (\n    <Radio\n      value="radio1"\n    >\n      Radio\n    </Radio>\n  );\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"radio-button-variants",children:"Radio Button Variants"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:"live",live:!0,children:'function RadioButtonDemo() {\n  const [value, setValue] = React.useState(\'line\');\n  return (\n    <Radio.Group value={value} onChange={e => setValue(e.target.value)}>\n      <Radio.Button value="line">Line Chart</Radio.Button>\n      <Radio.Button value="bar">Bar Chart</Radio.Button>\n      <Radio.Button value="pie">Pie Chart</Radio.Button>\n    </Radio.Group>\n  );\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"vertical-radio-group",children:"Vertical Radio Group"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:"live",live:!0,children:"function VerticalDemo() {\n  const [value, setValue] = React.useState('option1');\n  return (\n    <Radio.Group value={value} onChange={e => setValue(e.target.value)}>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n        <Radio value=\"option1\">First option</Radio>\n        <Radio value=\"option2\">Second option</Radio>\n        <Radio value=\"option3\">Third option</Radio>\n      </div>\n    </Radio.Group>\n  );\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Prop"}),(0,o.jsx)(t.th,{children:"Type"}),(0,o.jsx)(t.th,{children:"Default"}),(0,o.jsx)(t.th,{children:"Description"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"value"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"string"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:'"radio1"'})}),(0,o.jsx)(t.td,{children:"The value associated with this radio button."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"disabled"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"boolean"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"false"})}),(0,o.jsx)(t.td,{children:"Whether the radio button is disabled."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"checked"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"boolean"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"false"})}),(0,o.jsx)(t.td,{children:"Whether the radio button is checked (controlled mode)."})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"children"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"string"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:'"Radio"'})}),(0,o.jsx)(t.td,{children:"Label text displayed next to the radio button."})]})]})]}),"\n",(0,o.jsx)(t.h2,{id:"import",children:"Import"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"import { Radio } from '@superset-ui/core/components';\n"})}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsx)(t.admonition,{title:"Improve this page",type:"tip",children:(0,o.jsxs)(t.p,{children:["This documentation is auto-generated from the component's Storybook story.\nHelp improve it by ",(0,o.jsx)(t.a,{href:"https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Radio/Radio.stories.tsx",children:"editing the story file"}),"."]})})]})}function h(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},771887(e,t,n){n.d(t,{Cf:()=>j,ec:()=>x});var r=n(296540),o=n(978478),i=n(474848);let l=null,a=null;function d(){if("u"<typeof window)return({children:e})=>e;if(null!==a)return a;try{let{themeObject:t}=n(281928),{App:o,ConfigProvider:l}=n(983104),{useColorMode:d}=n(684575),s=e=>e?.closest?.(".storybook-example")||document.body;function e({children:n}){let{colorMode:o}=d();return r.useLayoutEffect(()=>{t.toggleDarkMode("dark"===o)},[o]),n}return a=({children:n})=>(0,i.jsx)(e,{children:(0,i.jsx)(t.SupersetThemeProvider,{children:(0,i.jsx)(l,{getPopupContainer:s,getTargetContainer:()=>document.body,children:(0,i.jsx)(o,{children:n})})})})}catch(e){return console.error("[StorybookWrapper] Failed to load providers:",e),({children:e})=>e}}function s(e){return!!e&&("function"==typeof e||"object"==typeof e&&!!e.$$typeof)}function c(e){if(!e)return null;if(s(e))return e;if("string"==typeof e){let t=function(){if("u"<typeof window)return{};if(null!==l)return l;try{let e=n(983104),t=n(616362),r=n(227441);return l={...e,...t,...r}}catch(e){return console.error("[StorybookWrapper] Failed to load components:",e),l={}}}();if(e.includes(".")){let n=e.split("."),r=t[n[0]];for(let e=1;e<n.length&&r;e++)r=r[n[e]];return s(r)?r:null}return t[e]||null}return null}function p(){return(0,i.jsx)("div",{style:{border:"1px solid var(--ifm-color-emphasis-300)",borderRadius:"4px",padding:"20px",marginBottom:"20px",minHeight:"100px",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--ifm-color-emphasis-600)"},children:"Loading component..."})}let h=["label","children","text","content"];function u({component:e,renderComponent:t,props:n,controls:o,sampleChildren:l,sampleChildrenStyle:a,triggerProp:s,on

1HideProp:p}){let x=t||e,m=c(x),j=d(),[v,f]=r.useState(n),y=(e,t)=>{f(n=>({...n,[e]:t}))},{children:b,restProps:g}=l?{children:null,restProps:v}:function(e){for(let t of h)if(void 0!==e[t]&&null!==e[t]&&""!==e[t]){let{[t]:n,...r}=e;return{children:n,restProps:r}}return{children:null,restProps:e}}(v),R=Object.fromEntries(Object.entries(g).filter(([,e])=>void 0!==e));if(Object.keys(R).forEach(e=>{let t=R[e];if(t&&"object"==typeof t&&!Array.isArray(t)&&t.component){let n=c(t.component);n&&(R[e]=(0,i.jsx)(n,{...t.props}))}Array.isArray(t)&&(R[e]=t.map((t,n)=>{if(t&&"object"==typeof t){let o={...t};return Object.keys(o).forEach(t=>{let i=o[t];if(i&&"object"==typeof i&&!Array.isArray(i)&&i.component){let l=c(i.component);l&&(o[t]=r.createElement(l,{key:`${e}-${n}`,...i.props}))}}),o}return t}))}),R.dataSource&&!R.renderItem){let e=c("List")?.Item;R.renderItem=t=>e?r.createElement(e,null,String(t)):r.createElement("div",null,String(t))}let k=function(e,t){if(!e)return null;let n=t||{};return Array.isArray(e)?e.map((e,t)=>{if(e&&"object"==typeof e&&e.component){let n=c(e.component);return n?(0,i.jsx)(n,{...e.props},t):(0,i.jsx)("div",{children:e.props?.children||`Unknown: ${e.component}`},t)}return(0,i.jsx)("div",{style:n,children:e},t)}):"number"==typeof e?Array(e).fill(null).map((e,t)=>(0,i.jsxs)("div",{style:n,children:["Item ",t+1]},t)):e}(l,a)||b,C={};if(s&&p){let e=()=>y(s,!1);p.split(",").forEach(t=>{C[t.trim()]=e})}let w=c("Button");return(0,i.jsx)(j,{children:(0,i.jsxs)("div",{className:"storybook-with-controls",children:[(0,i.jsx)("div",{className:"storybook-example",style:{border:"1px solid var(--ifm-color-emphasis-300)",borderRadius:"4px",padding:"20px",marginBottom:"20px",position:"relative"},children:m?(0,i.jsxs)(i.Fragment,{children:[s&&w&&(0,i.jsxs)(w,{onClick:()=>y(s,!0),children:["Open ",e]}),(0,i.jsx)(m,{...R,...C,children:k})]}):(0,i.jsxs)("div",{style:{color:"var(--ifm-color-emphasis-600)"},children:['Component "',String(x),'" not found']})}),o.length>0&&(0,i.jsxs)("div",{className:"storybook-controls",style:{border:"1px solid var(--ifm-color-emphasis-300)",borderRadius:"4px",padding:"20px",marginBottom:"20px"},children:[(0,i.jsx)("h4",{children:"Controls"}),o.map(e=>(0,i.jsxs)("div",{style:{marginBottom:"10px"},children:[(0,i.jsxs)("label",{style:{display:"block",marginBottom:"5px"},children:[e.label||e.name,":"]}),"select"===e.type?(0,i.jsxs)("select",{value:v[e.name]??"",onChange:t=>y(e.name,t.target.value||void 0),style:{width:"100%",padding:"5px"},children:[(0,i.jsx)("option",{value:"",children:"\u2014 None \u2014"}),e.options?.map(e=>(0,i.jsx)("option",{value:e,children:e},e))]}):"inline-radio"===e.type||"radio"===e.type?(0,i.jsx)("div",{style:{display:"flex",gap:"10px",flexWrap:"wrap"},children:e.options?.map(t=>(0,i.jsxs)("label",{style:{display:"flex",alignItems:"center",gap:"4px"},children:[(0,i.jsx)("input",{type:"radio",name:e.name,value:t,checked:v[e.name]===t,onChange:t=>y(e.name,t.target.value)}),t]},t))}):"boolean"===e.type?(0,i.jsx)("input",{type:"checkbox",checked:v[e.name],onChange:t=>y(e.name,t.target.checked)}):"number"===e.type?(0,i.jsx)("input",{type:"number",value:v[e.name],onChange:t=>y(e.name,Number(t.target.value)),style:{width:"100%",padding:"5px"}}):"color"===e.type?(0,i.jsx)("input",{type:"color",value:v[e.name]||"#000000",onChange:t=>y(e.name,t.target.value),style:{width:"50px",height:"30px",padding:"2px",cursor:"pointer"}}):(0,i.jsx)("input",{type:"text",value:v[e.name]??"",onChange:t=>y(e.name,t.target.value),style:{width:"100%",padding:"5px"}})]},e.name))]})]})})}function x({component:e,renderComponent:t,props:n={},controls:r=[],sampleChildren:l,sampleChildrenStyle:a,triggerProp:d,onHideProp:s}){return(0,i.jsx)(o.default,{fallback:(0,i.jsx)(p,{}),children:()=>(0,i.jsx)(u,{component:e,renderComponent:t,props:n,controls:r,sampleChildren:l,sampleChildrenStyle:a,triggerProp:d,onHideProp:s})})}function m({component:e,sizes:t,styles:n,sizeProp:r,styleProp:o}){let l=c(e),a=d();return l?(0,i.jsx)(a,{children:(0,i.jsx)("div",{className:"component-gallery",children:t.map(e=>(0,i.jsxs)("div",{style:{marginBottom:40},children:[(0,i.jsx)("h4",{style:{marginBottom:16,color:"var(--ifm-color-emphasis-700)"},children:e}),(0,i.jsx)("div",{style:{display:"flex",flexWrap:"wrap",gap:"12px",alignItems:"center"},children:n.map(t=>(0,i.jsx)(l,{[r]:e,[o]:t,children:t},`${t}_${e}`))})]},e))})}):(0,i.jsxs)("div",{style:{color:"var(--ifm-color-emphasis-600)"},children:['Component "',String(e),'" not found']})}function j({component:e,sizes:t=[],styles:n=[],sizeProp:r="size",styleProp:l="variant"}){return(0,i.jsx)(o.default,{fallback:(0,i.jsx)(p,{}),children:()=>(0,i.jsx)(m,{component:e,sizes:t,styles:n,sizeProp:r,styleProp:l})})}}}]);