diff --git a/packages/main/src/CheckBox.hbs b/packages/main/src/CheckBox.hbs
index f4f8638da787..496f0673f10f 100644
--- a/packages/main/src/CheckBox.hbs
+++ b/packages/main/src/CheckBox.hbs
@@ -6,7 +6,7 @@
 	aria-readonly="{{ariaReadonly}}"
 	tabindex="{{tabIndex}}">
 		<div id="{{ctr._id}}-CbBg" class="{{classes.inner}}">
-			<input id="{{ctr._id}}-CB" type='checkbox' ?checked="{{ctr.checked}}" ?readonly="{{ctr.readOnly}}" data-sap-no-tab-ref/>
+			<input id="{{ctr._id}}-CB" type='checkbox' ?checked="{{ctr.checked}}" ?readonly="{{ctr.readonly}}" data-sap-no-tab-ref/>
 		</div>
 
 		{{#if ctr._label.text}}
diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js
index 5482352e682d..6b59a916e108 100644
--- a/packages/main/src/CheckBox.js
+++ b/packages/main/src/CheckBox.js
@@ -44,7 +44,7 @@ const metadata = {
 		 * @defaultvalue false
 		 * @public
 		 */
-		readOnly: {
+		readonly: {
 			type: Boolean,
 			defaultValue: false,
 		},
@@ -161,7 +161,7 @@ const metadata = {
  * <br><br>
  * You can disable the <code>ui5-checkbox</code> by setting the <code>disabled</code> property to
  * <code>true</code>,
- * or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readOnly</code>
+ * or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readonly</code>
  * property to <code>true</code>.
  *
  * <h3>ES6 Module Import</h3>
@@ -246,7 +246,7 @@ class CheckBox extends UI5Element {
 	}
 
 	canToggle() {
-		return !(this.disabled || this.readOnly);
+		return !(this.disabled || this.readonly);
 	}
 
 	static get calculateTemplateContext() {
diff --git a/packages/main/src/CheckBoxTemplateContext.js b/packages/main/src/CheckBoxTemplateContext.js
index 3167cb374720..b276eb654340 100644
--- a/packages/main/src/CheckBoxTemplateContext.js
+++ b/packages/main/src/CheckBoxTemplateContext.js
@@ -7,7 +7,7 @@ class CheckBoxTemplateContext {
 
 		const context = {
 			ctr: state,
-			ariaReadonly: state.readOnly,
+			ariaReadonly: state.readonly,
 			tabIndex: state.disabled ? undefined : "0",
 			classes: { main: mainClasses, inner: innerClasses },
 			styles: {
@@ -19,13 +19,13 @@ class CheckBoxTemplateContext {
 	}
 
 	static getMainClasses(state) {
-		const hoverable = !state.disabled && !state.readOnly && isDesktop();
+		const hoverable = !state.disabled && !state.readonly && isDesktop();
 
 		return {
 			"ui5-checkbox-wrapper": true,
 			"ui5-checkbox-with-label": !!state.text,
 			"ui5-checkbox--disabled": state.disabled,
-			"ui5-checkbox--readonly": state.readOnly,
+			"ui5-checkbox--readonly": state.readonly,
 			"ui5-checkbox--error": state.valueState === "Error",
 			"ui5-checkbox--warning": state.valueState === "Warning",
 			"ui5-checkbox--wrap": state.wrap,
diff --git a/packages/main/src/RadioButton.hbs b/packages/main/src/RadioButton.hbs
index 1be1cbd9b064..cca83cd5862e 100644
--- a/packages/main/src/RadioButton.hbs
+++ b/packages/main/src/RadioButton.hbs
@@ -3,7 +3,7 @@
 	style="{{styles.main}}"
 	role="radio"
 	aria-checked="{{ctr.selected}}"
-	aria-readonly="{{readOnly}}"
+	aria-readonly="{{readonly}}"
 	tabindex="{{tabIndex}}">
 
 	<div class='{{classes.inner}}'>
@@ -11,7 +11,7 @@
 			<circle class="sapMRbSvgOuter" cx="{{circle.x}}" cy="{{circle.y}}" r="{{circle.rOuter}}" stroke-width="2" fill="none" />
 			<circle class="sapMRbSvgInner" cx="{{circle.x}}" cy="{{circle.y}}" r="{{circle.rInner}}" stroke-width="10" />
 		</svg>
- 		<input type='radio' ?checked="{{ctr.selected}}" ?readonly="{{ctr.readOnly}}" ?disabled="{{ctr.readOnly}}" name="{{ctr.name}}" data-sap-no-tab-ref/>
+ 		<input type='radio' ?checked="{{ctr.selected}}" ?readonly="{{ctr.readonly}}" ?disabled="{{ctr.readonly}}" name="{{ctr.name}}" data-sap-no-tab-ref/>
 	</div>
 
 	{{#if ctr._label.text}}
diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js
index 4f964cf7c2d2..0458d85503e6 100644
--- a/packages/main/src/RadioButton.js
+++ b/packages/main/src/RadioButton.js
@@ -51,7 +51,7 @@ const metadata = {
 		 * @defaultvalue false
 		 * @public
 		 */
-		readOnly: {
+		readonly: {
 			type: Boolean,
 		},
 
@@ -304,7 +304,7 @@ class RadioButton extends UI5Element {
 	}
 
 	canToggle() {
-		return !(this.disabled || this.readOnly || this.selected);
+		return !(this.disabled || this.readonly || this.selected);
 	}
 
 	static get calculateTemplateContext() {
diff --git a/packages/main/src/RadioButtonTemplateContext.js b/packages/main/src/RadioButtonTemplateContext.js
index 1fc1a3faef1e..e8f0f4961fe9 100644
--- a/packages/main/src/RadioButtonTemplateContext.js
+++ b/packages/main/src/RadioButtonTemplateContext.js
@@ -24,7 +24,7 @@ class RadioButtonTemplateContext {
 			innerClasses = RadioButtonTemplateContext.getInnerClasses(state),
 			context = {
 				ctr: state,
-				readOnly: state.disabled || state.readOnly,
+				readonly: state.disabled || state.readonly,
 				tabIndex: state.disabled || (!state.selected && state.name) ? "-1" : "0",
 				circle: compact ? SVGConfig.compact : SVGConfig.default,
 				classes: { main: mainClasses, inner: innerClasses },
@@ -42,14 +42,14 @@ class RadioButtonTemplateContext {
 			sapMRbHasLabel: state.text && state.text.length > 0,
 			sapMRbSel: state.selected,
 			sapMRbDis: state.disabled,
-			sapMRbRo: state.readOnly,
+			sapMRbRo: state.readonly,
 			sapMRbErr: state.valueState === "Error",
 			sapMRbWarn: state.valueState === "Warning",
 		};
 	}
 
 	static getInnerClasses(state) {
-		const hoverable = !state.disabled && !state.readOnly && isDesktop();
+		const hoverable = !state.disabled && !state.readonly && isDesktop();
 
 		return {
 			sapMRbInner: true,
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/RadioButton.html b/packages/main/test/sap/ui/webcomponents/main/pages/RadioButton.html
index 079e88a65149..e12a28fc9904 100644
--- a/packages/main/test/sap/ui/webcomponents/main/pages/RadioButton.html
+++ b/packages/main/test/sap/ui/webcomponents/main/pages/RadioButton.html
@@ -60,9 +60,9 @@ <h1>ui5-radiobutton</h1>
 	<section>
 		<ui5-title>ui5-radiobutton states</ui5-title></p>
 		<ui5-radiobutton id="myRb6" selected text="Default"></ui5-radiobutton>
-		<ui5-radiobutton id="myRb7" read-only text="read only"></ui5-radiobutton>
+		<ui5-radiobutton id="myRb7" readonly text="read only"></ui5-radiobutton>
 		<ui5-radiobutton id="myRb8" disabled text="disabled"></ui5-radiobutton>
-		<ui5-radiobutton id="myRb9" read-only text="read only" selected></ui5-radiobutton>
+		<ui5-radiobutton id="myRb9" readonly text="read only" selected></ui5-radiobutton>
 		<ui5-radiobutton id="myRb10" disabled text="disabled" selected></ui5-radiobutton>
 		<ui5-radiobutton id="myRb11" value-state="Warning" text="warning"></ui5-radiobutton>
 		<ui5-radiobutton id="myRb12" value-state="Error" text="error"></ui5-radiobutton>
diff --git a/packages/main/test/sap/ui/webcomponents/main/qunit/RadioButton.qunit.js b/packages/main/test/sap/ui/webcomponents/main/qunit/RadioButton.qunit.js
index bef7ac25b9f5..3f98e2cbc392 100644
--- a/packages/main/test/sap/ui/webcomponents/main/qunit/RadioButton.qunit.js
+++ b/packages/main/test/sap/ui/webcomponents/main/qunit/RadioButton.qunit.js
@@ -36,7 +36,7 @@ TestHelper.ready(function () {
 			assert.notOk(radiobutton.classList.contains(expectedClass), "root element does not have ." + expectedClass);
 		});
 
-		QUnit.test("The 'read-only' is not set by default", function (assert) {
+		QUnit.test("The 'readonly' is not set by default", function (assert) {
 			var expectedClass = "sapMRbRo",
 				radiobutton = this.getRadioButtonRoot();
 
@@ -97,14 +97,14 @@ TestHelper.ready(function () {
 			});
 		});
 
-		QUnit.test("changing the 'read-only' is reflected in the DOM", function (assert) {
+		QUnit.test("changing the 'readonly' is reflected in the DOM", function (assert) {
 			assert.expect(1);
 
 			var done = assert.async(),
 				expectedClass = "sapMRbRo",
 				radiobutton = this.getRadioButtonRoot();
 
-			this.radiobutton.setAttribute("read-only", "");
+			this.radiobutton.setAttribute("readonly", "");
 
 			RenderScheduler.whenFinished().then(function () {
 				assert.ok(radiobutton.classList.contains(expectedClass), "root element has ." + expectedClass);
diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/CheckBox.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/CheckBox.sample.html
index 08160cb9ada8..376957f13d52 100644
--- a/packages/main/test/sap/ui/webcomponents/main/samples/CheckBox.sample.html
+++ b/packages/main/test/sap/ui/webcomponents/main/samples/CheckBox.sample.html
@@ -59,21 +59,21 @@ <h3>CheckBox states</h3>
 			<ui5-checkbox text="Error" value-state="Error"></ui5-checkbox>
 			<ui5-checkbox text="Warning" value-state="Warning"></ui5-checkbox>
 			<ui5-checkbox text="Disabled" disabled checked></ui5-checkbox>
-			<ui5-checkbox text="Read-only" read-only checked></ui5-checkbox>
+			<ui5-checkbox text="Readonly" readonly checked></ui5-checkbox>
 			<ui5-checkbox text="Error disabled" disabled value-state="Error" checked></ui5-checkbox>
 			<ui5-checkbox text="Warning disabled " disabled value-state="Warning" checked></ui5-checkbox>
-			<ui5-checkbox text="Error read-only" read-only value-state="Error" checked></ui5-checkbox>
-			<ui5-checkbox text="Warning read-only" read-only value-state="Warning" checked></ui5-checkbox>
+			<ui5-checkbox text="Error readonly" readonly value-state="Error" checked></ui5-checkbox>
+			<ui5-checkbox text="Warning readonly" readonly value-state="Warning" checked></ui5-checkbox>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-checkbox text="Error" value-state="Error"></ui5-checkbox>
 <ui5-checkbox text="Warning" value-state="Warning"></ui5-checkbox>
 <ui5-checkbox text="Disabled" disabled checked></ui5-checkbox>
-<ui5-checkbox text="Read-only" read-only checked></ui5-checkbox>
+<ui5-checkbox text="Readonly" readonly checked></ui5-checkbox>
 <ui5-checkbox text="Error disabled" disabled value-state="Error" checked></ui5-checkbox>
 <ui5-checkbox text="Warning disabled " disabled value-state="Warning" checked></ui5-checkbox>
-<ui5-checkbox text="Error read-only" read-only value-state="Error" checked></ui5-checkbox>
-<ui5-checkbox text="Warning read-only" read-only value-state="Warning" checked></ui5-checkbox>
+<ui5-checkbox text="Error readonly" readonly value-state="Error" checked></ui5-checkbox>
+<ui5-checkbox text="Warning readonly" readonly value-state="Warning" checked></ui5-checkbox>
 		</xmp></pre>
 	</section>
 
diff --git a/packages/main/test/specs/DefaultValues.spec.js b/packages/main/test/specs/DefaultValues.spec.js
index 0460c72462cc..21d406cc9c07 100644
--- a/packages/main/test/specs/DefaultValues.spec.js
+++ b/packages/main/test/specs/DefaultValues.spec.js
@@ -25,7 +25,7 @@ describe("Default values", () => {
 		assertBooleanProperty(button, "submits");
 
 		// CheckBox
-		assertBooleanProperty(cb, "readOnly");
+		assertBooleanProperty(cb, "readonly");
 		assertBooleanProperty(cb, "checked");
 		assertBooleanProperty(cb, "disabled");
 
@@ -54,7 +54,7 @@ describe("Default values", () => {
 		assertBooleanProperty(panel, "fixed");
 
 		// RadioButton
-		assertBooleanProperty(radiobutton, "readOnly");
+		assertBooleanProperty(radiobutton, "readonly");
 		assertBooleanProperty(radiobutton, "selected");
 		assertBooleanProperty(radiobutton, "disabled");