diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_html.html b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_html.html
index ff8971806379058716b6578059b1df19da020968..7ba2bde177bbb924e7f4fb460bd54ad6ba5669b1 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_html.html
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_html.html
@@ -11,11 +11,7 @@
     <!-- custom script -->
     <script src="gadget_erp5_field_radio.js" type="text/javascript"></script>
   </head>
-  
+
   <body>
-     <fieldset class="ui-controlgroup ui-corner-all ui-controlgroup-vertical">
-       <div class="radiogroup">
-       </div>
-    </fieldset>
   </body>
 </html>
\ No newline at end of file
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_html.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_html.xml
index 489970a8ed9db80a6213ced660c3dae30429e9c6..5a8673daf2dbe2ea32264ddd3de58e000b9b0338 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_html.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_html.xml
@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>943.62898.42115.10666</string> </value>
+                <value> <string>954.45675.44850.53452</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,8 +252,8 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1435816933.09</float>
-                        <string>GMT+2</string>
+                        <float>1477649679.02</float>
+                        <string>UTC</string>
                       </tuple>
                     </state>
                   </object>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_js.js
index cb0a95b0d569c1bb228c551b0e4d7d8179278a8c..9e0de39fde8e73abc3d75425665b3df61fee6153 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_js.js
@@ -3,83 +3,154 @@
 (function (window, rJS, RSVP) {
   "use strict";
 
+  function appendCheckboxField(gadget, item) {
+    var input_gadget,
+      label_gadget;
+    return new RSVP.Queue()
+      .push(function () {
+        return gadget.declareGadget('gadget_html5_input.html', {scope: item[1]});
+      })
+      .push(function (result) {
+        input_gadget = result;
+        var state_dict = {
+          type: 'radio',
+          name: gadget.state.name,
+          value: item[1],
+          editable: true
+        };
+        if (item[1] === gadget.state.value) {
+          state_dict.checked = 1;
+        }
+        return result.render(state_dict);
+      })
+      .push(function () {
+        return gadget.declareGadget('gadget_html5_element.html');
+      })
+      .push(function (result) {
+        label_gadget = result;
+        var state_dict = {
+          tag: 'label',
+          text_content: item[0]
+        };
+        return result.render(state_dict);
+      })
+      .push(function () {
+        var div = document.createElement("div");
+        div.setAttribute("class", "ui-field-contain");
+        div.appendChild(label_gadget.element);
+        div.appendChild(input_gadget.element);
+        gadget.element.appendChild(div);
+      });
+  }
+
   rJS(window)
-    .ready(function (gadget) {
-      return gadget.getElement()
-        .push(function (element) {
-          gadget.props = {};
-          gadget.props.element = element;
-        });
-    })
-    .declareAcquiredMethod("notifyInvalid", "notifyInvalid")
-    .declareAcquiredMethod("notifyValid", "notifyValid")
+
     .declareMethod('render', function (options) {
-      var radio_group = this.props.element.querySelector(".radiogroup"),
-        i,
-        input,
-        label,
-        div,
-        field_json = options.field_json,
-        value = field_json.default || "",
-        editable = field_json.editable,
-        items = field_json.items;
+      var field_json = options.field_json || {},
+        state_dict = {
+          value: field_json.value || field_json.default,
+          select_first_item: field_json.select_first_item,
+          editable: field_json.editable,
+          name: field_json.key,
+          title: field_json.title,
+          item_list: field_json.items
+        };
+
       //the first item will always be selected if no initial default value is supplied.
-      if (value === "" && field_json.select_first_item) {
-        value = items[0][1];
+      if (state_dict.value === "" && state_dict.select_first_item) {
+        state_dict.value = state_dict.items[0][1];
       }
-      this.props.field_json = field_json;
-      for (i = 0; i < items.length; i += 1) {
-        div = document.createElement("div");
-        div.setAttribute("class", "ui-field-contain");
-        input = document.createElement("input");
-        input.setAttribute("class", "ui-btn");
-        input.setAttribute("type", "radio");
-        input.setAttribute("name", field_json.key);
-        input.setAttribute("value", items[i][1]);
-        if (items[i][1] === value) {
-          input.setAttribute("checked", true);
-        }
-        if (editable === 0) {
-          input.setAttribute("class", "ui-btn ui-state-disabled");
+
+      return this.changeState(state_dict);
+    })
+
+    .onStateChange(function () {
+      var element = this.element,
+        gadget = this,
+        value = this.state.value,
+        item_list = this.state.item_list,
+        i,
+        sub_gadget,
+        queue;
+
+      // Clear first to DOM, append after to reduce flickering/manip
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+
+      function enQueue() {
+        var argument_list = arguments;
+        queue
+          .push(function () {
+            return appendCheckboxField.apply(this, argument_list);
+          });
+      }
+
+      if (gadget.state.editable) {
+        queue = new RSVP.Queue();
+
+        for (i = 0; i < item_list.length; i += 1) {
+          enQueue(gadget, item_list[i]);
         }
-        label = document.createElement("label");
-        label.setAttribute('for', items[i][0]);
-        label.textContent = items[i][0];
-        label.setAttribute('data-i18n', items[i][0]);
-        
-        div.appendChild(label);
-        div.appendChild(input);
-        radio_group.appendChild(div);
+
+      } else {
+        queue = gadget.declareGadget('gadget_html5_element.html', {scope: 'sub'})
+          .push(function (result) {
+            sub_gadget = result;
+            var text_content = "";
+
+            for (i = 0; i < item_list.length; i += 1) {
+              if (item_list[i][1] === value) {
+                text_content = item_list[i][0];
+              }
+            }
+            return sub_gadget.render({
+              text_content: text_content,
+              tag: 'p'
+            });
+          })
+          .push(function () {
+            element.appendChild(sub_gadget.element);
+          });
       }
-      radio_group.setAttribute("data-type", field_json.orientation);
-    })
-    .declareMethod('checkValidity', function () {
-      var gadget = this,
-        json_field = gadget.props.field_json;
-      return new RSVP.Queue()
-        .push(function () {
-          return gadget.notifyValid();
-        })
-        .push(function () {
-          return gadget.getContent();
-        })
-        .push(function (result) {
-          if (json_field.required && !result.hasOwnProperty(json_field.key)) {
-            return gadget.notifyInvalid("This field is required");
-          }
-          return true;
-        });
+      return queue;
     })
+
     .declareMethod('getContent', function () {
-      var inputs = this.props.element.querySelectorAll("input"),
-        i,
-        result = {};
-      for (i = 0; i < inputs.length; i += 1) {
-        if (inputs[i].checked === true) {
-          result[this.props.field_json.key] = inputs[i].value;
-          break;
+      var i,
+        queue = new RSVP.Queue(),
+        final_result = {},
+        result_list = [],
+        gadget = this;
+
+      function calculateSubContent(scope) {
+        queue
+          .push(function () {
+            return gadget.getDeclaredGadget(scope)
+              .push(function (result) {
+                return result.getContent();
+              })
+              .push(function (result) {
+                result_list.push(result);
+              });
+          });
+      }
+
+      if (this.state.editable) {
+        for (i = 0; i < gadget.state.item_list.length; i += 1) {
+          calculateSubContent(gadget.state.item_list[i][1]);
         }
+
+        return queue
+          .push(function () {
+            var j;
+            for (j = 0; j < result_list.length; j += 1) {
+              if (result_list[j].hasOwnProperty(gadget.state.name)) {
+                return result_list[j];
+              }
+            }
+          });
       }
-      return result;
+      return final_result;
     });
 }(window, rJS, RSVP));
\ No newline at end of file
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_js.xml
index fe37eb24687439eca6a31fa8847d032c8f76b5f7..24b07ba91c793a001849c77379a4d279972f9d1f 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_radiofield_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>944.6869.21158.19933</string> </value>
+                <value> <string>954.58788.20793.64136</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,8 +248,8 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1435817661.94</float>
-                        <string>GMT+2</string>
+                        <float>1477649548.1</float>
+                        <string>UTC</string>
                       </tuple>
                     </state>
                   </object>
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.js
index 846edc3f30fe70323b57e9a811dfaffd9061844d..7456bc12c0390e45929c99f35107dc4cf6d932ae 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.js
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.js
@@ -36,6 +36,9 @@
         textarea.setAttribute('value', this.state.value);
         textarea.value = this.state.value;
       }
+      if (this.state.type === 'radio') {
+        textarea.checked = this.state.checked;
+      }
       textarea.setAttribute('name', this.state.name);
       textarea.setAttribute('type', this.state.type);
       if (this.state.title) {
@@ -90,6 +93,10 @@
           }
         } else if (this.state.type === 'checkbox') {
           result[input.getAttribute('name')] = (input.checked ? 1 : 0);
+        } else if (this.state.type === 'radio') {
+          if (input.checked) {
+            result[input.getAttribute('name')] = input.value;
+          }
         } else {
           result[input.getAttribute('name')] = input.value;
         }
@@ -98,10 +105,14 @@
     })
 
     .declareMethod('getTextContent', function () {
-      var result,
+      var result = '',
         input = this.element.querySelector('input');
       if (this.state.type === 'checkbox') {
         result = (input.checked ? '✓' : '');
+      } else if (this.state.type === 'radio') {
+        if (input.checked) {
+          result = input.value;
+        }
       } else {
         result = input.value;
       }
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml
index dd47d268a770cf9cf5eef78d25024437189b44cc..13e4f74a5cac3d3ecc1c0b9ce5a2bcbb133f6783 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_input_js.xml
@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.47167.27024.21401</string> </value>
+                <value> <string>954.58784.35206.25787</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1476952365.89</float>
+                        <float>1477649395.4</float>
                         <string>UTC</string>
                       </tuple>
                     </state>