FIO-7773: Adding floating labels to Bootstrap 5 template.

app/examples/floating.md

@@ -0,0 +1,130 @@
+---
+title: Floating Labels
+layout: vtabs
+section: examples
+formioFull: true
+weight: 31
+---
+With the default template of Bootstrap 5, it is now possible to have Floating Labels feature where the labels are placeholders until the user clicks into component. The label, will then move to above the cursor improving the UI/UX of the form experience. To enable floating labels, you must first use the "default" Bootstrap 5 template, and then provide the following when embedding your form.
+
+```js
+Formio.createForm(document.getElementById('formio'), {...}, {
+  floatingLabels: true
+});
+```
+
+Here is an example.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
+<script src="https://cdn.form.io/js/formio.embed.js"></script>
+<div id="formio"></div>
+```
+
+<div class="row">
+<div class="col col-sm-6">
+
+<pre>
+Formio.createForm(document.getElementById('formio'), {
+  components: [
+    {
+      type: 'textfield',
+      key: 'firstName',
+      label: 'First Name',
+      placeholder: 'Enter your first name.',
+      input: true,
+      validate: {
+        required: true
+      }
+    },
+    {
+      type: 'textfield',
+      key: 'lastName',
+      label: 'Last Name',
+      placeholder: 'Enter your last name',
+      input: true,
+      validate: {
+        required: true
+      }
+    },
+    {
+      type: 'email',
+      key: 'email',
+      label: 'Email',
+      placeholder: 'Enter your email',
+      input: true,
+      validateOn: 'blur'
+    },
+    {
+      type: 'button',
+      action: 'submit',
+      label: 'Submit',
+      theme: 'primary'
+    }
+  ]
+}, {
+  floatingLabels: true
+});
+</pre>
+
+</div>
+<div class="col col-sm-6">
+<h3>Result</h3>
+<div class="card card-body bg-light">
+<div id="formio"></div>
+<script type="text/javascript">
+Formio.createForm(document.getElementById('formio'), {
+  components: [
+    {
+      type: 'textfield',
+      key: 'firstName',
+      label: 'First Name',
+      placeholder: 'Enter your first name.',
+      input: true,
+      validate: {
+        required: true
+      }
+    },
+    {
+      type: 'textfield',
+      key: 'lastName',
+      label: 'Last Name',
+      placeholder: 'Enter your last name',
+      input: true,
+      validate: {
+        required: true
+      }
+    },
+    {
+      type: 'email',
+      key: 'email',
+      label: 'Email',
+      placeholder: 'Enter your email',
+      input: true,
+      validateOn: 'blur'
+    },
+    {
+      type: 'button',
+      action: 'submit',
+      label: 'Submit',
+      theme: 'primary'
+    }
+  ]
+}, {
+  floatingLabels: true
+}).then(function(form) {
+  form.on('change', function(changed) {
+    console.log('Changed!', changed);
+  });
+
+  form.on('submit', function(submission) {
+    console.log('Submitted!', submission);
+  });
+});
+</script>
+</div>
+</div>
+</div>
+
+

src/Element.js

@@ -567,6 +567,7 @@ export default class Element {
       token: Formio.getToken({
         decode: true
       }),
+      options: this.options,
       config: this.root && this.root.form && this.root.form.config
         ? this.root.form.config
         : this.options?.formConfig

src/components/_classes/component/Component.js

@@ -873,6 +873,7 @@ export default class Component extends Element {
     return !this.component.label ||
       ((!this.isInDataGrid && this.component.hideLabel) ||
       (this.isInDataGrid && !this.component.dataGridLabel) ||
+      this.options.floatingLabels ||
       this.options.inputsOnly) && !this.builderMode;
   }
 

types/formio.d.ts

@@ -34,6 +34,7 @@ export class Formio {
   static namespace: string;
   static formOnly?: boolean;
   static rulesEntities: any;
+  static options: any;
   delete(type: any, opts?: any): any;
   index(type: any, query?: any, opts?: any): any;
   save(type: any, data: any, opts?: any): any;