[Radio][Joy UI] spread readOnly and required to input

packages/mui-joy/src/Radio/Radio.test.js

@@ -35,6 +35,18 @@ describe('<Radio />', () => {
     expect(getByRole('radio')).to.have.property('name', 'bar');
   });
 
+  it('renders a `role="radio"` with the required attribute', () => {
+    const { getByRole } = render(<Radio name="bar" required />);
+
+    expect(getByRole('radio')).to.have.attribute('required');
+  });
+
+  it('renders a `role="radio"` with the readOnly attribute', () => {
+    const { getByRole } = render(<Radio name="bar" readOnly />);
+
+    expect(getByRole('radio')).to.have.attribute('readonly');
+  });
+
   it('renders a `role="radio"` with the Unchecked state by default', () => {
     const { getByRole } = render(<Radio />);
 

packages/mui-joy/src/Radio/Radio.tsx

@@ -236,6 +236,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
     onChange,
     onFocus,
     onFocusVisible,
+    readOnly,
     required,
     color,
     variant = 'outlined',
@@ -345,6 +346,8 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
       type: 'radio',
       id,
       name,
+      readOnly,
+      required,
       value: String(value),
       'aria-describedby': formControl?.['aria-describedby'],
     },
@@ -478,6 +481,10 @@ Radio.propTypes /* remove-proptypes */ = {
    * @default false;
    */
   overlay: PropTypes.bool,
+  /**
+   * If `true`, the component is read only.
+   */
+  readOnly: PropTypes.bool,
   /**
    * If `true`, the `input` element is required.
    */