diff --git a/packages/mui-joy/src/Radio/Radio.test.js b/packages/mui-joy/src/Radio/Radio.test.js index a43e72a0068a97..4678f619c0fa0a 100644 --- a/packages/mui-joy/src/Radio/Radio.test.js +++ b/packages/mui-joy/src/Radio/Radio.test.js @@ -35,6 +35,18 @@ describe('', () => { expect(getByRole('radio')).to.have.property('name', 'bar'); }); + it('renders a `role="radio"` with the required attribute', () => { + const { getByRole } = render(); + + expect(getByRole('radio')).to.have.attribute('required'); + }); + + it('renders a `role="radio"` with the readOnly attribute', () => { + const { getByRole } = render(); + + expect(getByRole('radio')).to.have.attribute('readonly'); + }); + it('renders a `role="radio"` with the Unchecked state by default', () => { const { getByRole } = render(); diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx index e64d10bfdf4e37..9ac7a0e92104e0 100644 --- a/packages/mui-joy/src/Radio/Radio.tsx +++ b/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. */