diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js
index ff85b4d0f89e..cad6744541f2 100644
--- a/packages/main/src/CheckBox.js
+++ b/packages/main/src/CheckBox.js
@@ -186,6 +186,17 @@ class CheckBox extends UI5Element {
onBeforeRendering() {
this.syncLabel();
+ this._enableFormSupport();
+ }
+
+ syncLabel() {
+ this._label = Object.assign({}, this._label);
+ this._label.text = this.text;
+ this._label.wrap = this.wrap;
+ this._label.textDirection = this.textDirection;
+ }
+
+ _enableFormSupport() {
if (CheckBox.FormSupport) {
CheckBox.FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
nativeInput.disabled = element.disabled || !element.checked;
@@ -196,13 +207,6 @@ class CheckBox extends UI5Element {
}
}
- syncLabel() {
- this._label = Object.assign({}, this._label);
- this._label.text = this.text;
- this._label.wrap = this.wrap;
- this._label.textDirection = this.textDirection;
- }
-
onclick() {
this.toggle();
}
diff --git a/packages/main/src/InputElementsFormSupport.js b/packages/main/src/InputElementsFormSupport.js
index 8ed9c7bd40bb..ee6e735f4b74 100644
--- a/packages/main/src/InputElementsFormSupport.js
+++ b/packages/main/src/InputElementsFormSupport.js
@@ -2,6 +2,7 @@ import Input from "./Input.js";
import TextArea from "./TextArea.js";
import DatePicker from "./DatePicker.js";
import CheckBox from "./CheckBox.js";
+import RadioButton from "./RadioButton.js";
import Button from "./Button.js";
import FormSupport from "./util/FormSupport.js";
@@ -10,6 +11,7 @@ Input.FormSupport = FormSupport;
TextArea.FormSupport = FormSupport;
DatePicker.FormSupport = FormSupport;
CheckBox.FormSupport = FormSupport;
+RadioButton.FormSupport = FormSupport;
Button.FormSupport = FormSupport;
export default {};
diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js
index f6ff19d14221..3c5ecc053ea8 100644
--- a/packages/main/src/RadioButton.js
+++ b/packages/main/src/RadioButton.js
@@ -102,6 +102,13 @@ const metadata = {
*
Note:
* Only one radio button can be selected per group.
*
+ * Important: For the name
property to have effect when submitting forms, you must add the following import to your project:
+ * import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";
+ *
+ * Note: When set, a native input
HTML element
+ * will be created inside the ui5-radiobutton
so that it can be submitted as
+ * part of an HTML form.
+ *
* @type {string}
* @public
*/
@@ -110,6 +117,22 @@ const metadata = {
type: String,
},
+ /**
+ * Defines the form value of the ui5-radiobutton
.
+ * When a form with a radio button group is submitted, the group's value
+ * will be the value of the currently selected radio button.
+ *
+ * Important: For the value
property to have effect, you must add the following import to your project:
+ * import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";
+ *
+ * @type {string}
+ * @public
+ */
+ value: {
+ type: String,
+ defaultValue: "",
+ },
+
_label: {
type: Object,
},
@@ -170,6 +193,8 @@ class RadioButton extends UI5Element {
onBeforeRendering() {
this.syncLabel();
this.syncGroup();
+
+ this._enableFormSupport();
}
syncLabel() {
@@ -198,6 +223,17 @@ class RadioButton extends UI5Element {
this._name = this.name;
}
+ _enableFormSupport() {
+ if (RadioButton.FormSupport) {
+ RadioButton.FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
+ nativeInput.disabled = element.disabled || !element.selected;
+ nativeInput.value = element.selected ? element.value : "";
+ });
+ } else if (this.value) {
+ console.warn(`In order for the "value" property to have effect, you should also: import InputElementsFormSupport from "@ui5/webcomponents/dist/InputElementsFormSupport";`); // eslint-disable-line
+ }
+ }
+
onclick() {
return this.toggle();
}
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/FormSupport.html b/packages/main/test/sap/ui/webcomponents/main/pages/FormSupport.html
index 5d77f948408e..316e8e097d91 100644
--- a/packages/main/test/sap/ui/webcomponents/main/pages/FormSupport.html
+++ b/packages/main/test/sap/ui/webcomponents/main/pages/FormSupport.html
@@ -25,6 +25,10 @@