diff --git a/docs/src/components/pricing/LicenseTypeWidget.tsx b/docs/src/components/pricing/LicenseTypeWidget.tsx
new file mode 100644
index 00000000000000..b25b2b11cb581f
--- /dev/null
+++ b/docs/src/components/pricing/LicenseTypeWidget.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material';
+
+
+const LicenseTypeWrapper = styled(Box)(({ theme }) => ({
+    display:'flex',
+    flexFlow:'column',
+    justifyContent:'center',
+    alignItems:'center',
+    fontSize:'0.9em',
+    mb:4,
+    h2: {
+        color: theme.palette.primary.main,
+        fontSize:'1em',
+        margin:0,
+    },
+  }));
+
+const LicenseOption = styled(Box)(({ theme, isSelected }) => ({
+    textAlign: 'center',
+    maxWidth:'50%',
+    
+    h3: {
+        color: isSelected ? theme.palette.primary.main : '#c0c0c0',
+        borderBottom: '2px solid',
+        borderColor: isSelected ? theme.palette.primary.main : 'transparent',
+        display:'inline-block',
+        paddingBottom:'10px',
+        marginBottom:'10px',
+    },
+
+    p: {
+        color: isSelected ? '' : '#c0c0c0',
+        display:'inline-block',
+        padding: "0px 4px",
+        margin:0,
+        fontSize:'0.9em',
+    },
+  }));
+
+export default function LicenseTypeWidget(props:{ onChange:(newValue:string)=>void }) {
+  
+    const option1Title = "Subscription";
+    const option1Description = "Perfect for long-term adoption and interest on continuous improvements. Move to a perpetual anytime." ;
+    const option2Title = "Perpetual";
+    const option2Description = "Have full access to any versions released during the first year.";
+  
+    const [selectedOption, setSelectedOption] = React.useState<string>(option1Title);
+  
+    const handleOptionClick = (title: string) => {
+      setSelectedOption(title);
+      props.onChange(title);
+    }
+  
+    const subscriptionSelected = selectedOption === option1Title
+    return (
+      <LicenseTypeWrapper 
+        role="radiogroup"
+        aria-labelledby="License type"
+        >
+        <h2 id="exclusive-options-heading">License type</h2>
+        <Box sx={{display:'flex', maxWidth:'600px', textAlign:'center', justifyContent:'center'}}>
+        <LicenseOption
+          role="radio"
+          isSelected={subscriptionSelected}
+          aria-checked={subscriptionSelected}
+          tabIndex={0}
+          onClick={() => handleOptionClick(option1Title)}
+          onKeyPress={(event) => {
+            if (event.key === 'Enter') {
+              handleOptionClick(option1Title);
+            }
+          }}
+        >
+          <h3>{option1Title}</h3>
+          <p>{option1Description}</p>
+        </LicenseOption>
+        <LicenseOption
+          role="radio"
+          isSelected={!subscriptionSelected}
+          aria-checked={!subscriptionSelected}
+          tabIndex={0}
+          onClick={() => handleOptionClick(option2Title)}
+          onKeyPress={(event) => {
+            if (event.key === 'Enter') {
+              handleOptionClick(option2Title);
+            }
+          }}
+        >
+          <h3>{option2Title}</h3>
+          <p>{option2Description}</p>
+        </LicenseOption>
+        </Box>
+      </LicenseTypeWrapper>
+    );
+  }
\ No newline at end of file