diff --git a/examples/server/public_simplechat/simplechat.js b/examples/server/public_simplechat/simplechat.js
index 2e1d7c092..33f11fd93 100644
--- a/examples/server/public_simplechat/simplechat.js
+++ b/examples/server/public_simplechat/simplechat.js
@@ -576,17 +576,17 @@ class Me {
      */
     show_settings(elDiv) {
 
-        let bb = ui.el_create_boolbutton("SetCompletionFreshChatAlways", {true: "[+] CompletionFreshChatAlways", false: "[-] CompletionFreshChatAlways"}, this.bCompletionFreshChatAlways, (val)=>{
+        let bb = ui.el_creatediv_boolbutton("SetCompletionFreshChatAlways", "CompletionFreshChatAlways", {true: "[+] CompletionFreshChatAlways", false: "[-] CompletionFreshChatAlways"}, this.bCompletionFreshChatAlways, (val)=>{
             this.bCompletionFreshChatAlways = val;
         });
         elDiv.appendChild(bb);
 
-        bb = ui.el_create_boolbutton("SetCompletionInsertStandardRolePrefix", {true: "[+] CompletionInsertStandardRolePrefix", false: "[-] CompletionInsertStandardRolePrefix"}, this.bCompletionInsertStandardRolePrefix, (val)=>{
+        bb = ui.el_creatediv_boolbutton("SetCompletionInsertStandardRolePrefix", "CompletionInsertStandardRolePrefix", {true: "[+] CompletionInsertStandardRolePrefix", false: "[-] CompletionInsertStandardRolePrefix"}, this.bCompletionInsertStandardRolePrefix, (val)=>{
             this.bCompletionInsertStandardRolePrefix = val;
         });
         elDiv.appendChild(bb);
 
-        let sel = ui.el_create_select("SetChatHistoryInCtxt", this.sRecentUserMsgCnt, this.iRecentUserMsgCnt, (val)=>{
+        let sel = ui.el_creatediv_select("SetChatHistoryInCtxt", "ChatHistoryInCtxt", this.sRecentUserMsgCnt, this.iRecentUserMsgCnt, (val)=>{
             this.iRecentUserMsgCnt = this.sRecentUserMsgCnt[val];
         });
         elDiv.appendChild(sel);
diff --git a/examples/server/public_simplechat/ui.mjs b/examples/server/public_simplechat/ui.mjs
index ea235b15a..3b24ebca1 100644
--- a/examples/server/public_simplechat/ui.mjs
+++ b/examples/server/public_simplechat/ui.mjs
@@ -62,7 +62,9 @@ export function el_create_append_p(text, elParent=undefined, id=undefined) {
 }
 
 /**
- * Create a para and set it up. Optionaly append it to a passed parent.
+ * Create a button which represents bool value using specified text wrt true and false.
+ * When ever user clicks the button, it will toggle the value and update the shown text.
+ *
  * @param {string} id
  * @param {{true: string, false: string}} texts
  * @param {boolean} defaultValue
@@ -85,6 +87,31 @@ export function el_create_boolbutton(id, texts, defaultValue, cb) {
 }
 
 /**
+ * Create a div wrapped button which represents bool value using specified text wrt true and false.
+ * @param {string} id
+ * @param {string} label
+ * @param {{ true: string; false: string; }} texts
+ * @param {boolean} defaultValue
+ * @param {(arg0: boolean) => void} cb
+ */
+export function el_creatediv_boolbutton(id, label, texts, defaultValue, cb) {
+    let div = document.createElement("div");
+    let lbl = document.createElement("label");
+    lbl.setAttribute("for", id);
+    lbl.innerText = label;
+    div.appendChild(lbl);
+    let sel = el_create_boolbutton(id, texts, defaultValue, cb);
+    div.appendChild(sel);
+    return div;
+}
+
+
+/**
+ * Create a select ui element, with a set of options to select from.
+ * * options: an object which contains name-value pairs
+ * * defaultOption: the value whose name should be choosen, by default.
+ * * cb : the call back returns the name string of the option selected.
+ *
  * @param {string} id
  * @param {Object<string,*>} options
  * @param {*} defaultOption
@@ -114,3 +141,23 @@ export function el_create_select(id, options, defaultOption, cb) {
     })
     return el;
 }
+
+/**
+ * Create a div wrapped select ui element, with a set of options to select from.
+ *
+ * @param {string} id
+ * @param {any} label
+ * @param {{ [x: string]: any; }} options
+ * @param {any} defaultOption
+ * @param {(arg0: string) => void} cb
+ */
+export function el_creatediv_select(id, label, options, defaultOption, cb) {
+    let div = document.createElement("div");
+    let lbl = document.createElement("label");
+    lbl.setAttribute("for", id);
+    lbl.innerText = label;
+    div.appendChild(lbl);
+    let sel = el_create_select(id, options,defaultOption, cb);
+    div.appendChild(sel);
+    return div;
+}