diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 7f2d47381e..72da15cd28 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -267,7 +267,7 @@ export namespace Components {
          */
         "checked": boolean;
         /**
-          * If `true`, the user cannot interact with the checkbox.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled": boolean;
         /**
@@ -294,6 +294,10 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly": boolean;
         /**
           * Sets blur on the native `input`. Use this method instead of the global `input.blur()`.
          */
@@ -402,7 +406,7 @@ export namespace Components {
          */
         "defaultDate"?: string;
         /**
-          * If `true` the component is disabled.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled": boolean;
         /**
@@ -450,7 +454,7 @@ export namespace Components {
          */
         "placeholder"?: string;
         /**
-          * If `true` the use can only select a date.
+          * If `true` the element can not mutated, meaning the user can not edit the control.
          */
         "readonly": boolean;
         /**
@@ -529,7 +533,7 @@ export namespace Components {
     }
     interface BalField {
         /**
-          * If `true` the field loses opacity
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled": boolean;
         /**
@@ -544,6 +548,10 @@ export namespace Components {
           * If `true` a loading spinner is visible at the end of the input
          */
         "loading": boolean;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly": boolean;
     }
     interface BalFieldControl {
         /**
@@ -611,7 +619,7 @@ export namespace Components {
          */
         "clear": () => Promise<void>;
         /**
-          * If `true` the button is disabled
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled": boolean;
         /**
@@ -642,6 +650,10 @@ export namespace Components {
           * If `true` multiple file upload is possible.
          */
         "multiple": boolean;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly": boolean;
         /**
           * Overrides the default subtitle file size
          */
@@ -789,7 +801,7 @@ export namespace Components {
          */
         "decimal"?: number;
         /**
-          * If `true` the input is disabled
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled": boolean;
         /**
@@ -850,7 +862,7 @@ export namespace Components {
          */
         "placeholder"?: string;
         /**
-          * If `true`, the user cannot modify the value.
+          * If `true` the element can not mutated, meaning the user can not edit the control.
          */
         "readonly": boolean;
         /**
@@ -898,7 +910,7 @@ export namespace Components {
          */
         "debounce": number;
         /**
-          * If `true` the input is disabled
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled": boolean;
         /**
@@ -921,6 +933,10 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly": boolean;
         /**
           * The steps in which the input increases or decreases
          */
@@ -1101,7 +1117,7 @@ export namespace Components {
          */
         "decimal": number;
         /**
-          * If `true` the input is disabled
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled": boolean;
         /**
@@ -1121,7 +1137,7 @@ export namespace Components {
          */
         "placeholder"?: string;
         /**
-          * If `true`, the user cannot modify the value.
+          * If `true` the element can not mutated, meaning the user can not edit the control.
          */
         "readonly": boolean;
         /**
@@ -1207,9 +1223,13 @@ export namespace Components {
     }
     interface BalPopoverContent {
         /**
-          * If `true` the field spans over the whole width.
+          * Define the max width of the popover content.
          */
         "contentWidth": number;
+        /**
+          * If `true` the content has a min width of 100%.
+         */
+        "expanded": boolean;
         /**
           * Limit the height of the popover content. Pass the amount of pixel.
          */
@@ -1221,7 +1241,7 @@ export namespace Components {
          */
         "checked": boolean;
         /**
-          * If `true`, the user cannot interact with the checkbox.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled": boolean;
         /**
@@ -1244,6 +1264,10 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly": boolean;
         /**
           * Sets blur on the native `input`. Use this method instead of the global `input.blur()`.
          */
@@ -1259,7 +1283,7 @@ export namespace Components {
     }
     interface BalRadioGroup {
         /**
-          * If `true`, the user cannot interact with the radios.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -1274,6 +1298,10 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly"?: boolean;
         "setValue": (value: number | string | boolean) => Promise<void>;
         /**
           * The value of the control.
@@ -1306,7 +1334,7 @@ export namespace Components {
          */
         "close": () => Promise<void>;
         /**
-          * If `true` the component is disabled.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled": boolean;
         /**
@@ -1353,6 +1381,10 @@ export namespace Components {
           * The text to display when the select is empty.
          */
         "placeholder"?: string;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly": boolean;
         /**
           * Defines the height of the popover list.
          */
@@ -1404,7 +1436,7 @@ export namespace Components {
          */
         "debounce": number;
         /**
-          * If `true` the input is disabled
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled": boolean;
         /**
@@ -1428,7 +1460,7 @@ export namespace Components {
          */
         "name": string;
         /**
-          * If `true`, the user cannot modify the value.
+          * If `true` the element can not mutated, meaning the user can not edit the control.
          */
         "readonly": boolean;
         /**
@@ -1674,7 +1706,7 @@ export namespace Components {
          */
         "debounce": number;
         /**
-          * If `true`, the user cannot interact with the textarea.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled": boolean;
         /**
@@ -1710,7 +1742,7 @@ export namespace Components {
          */
         "placeholder"?: string;
         /**
-          * If `true`, the user cannot modify the value.
+          * If `true` the element can not mutated, meaning the user can not edit the control.
          */
         "readonly": boolean;
         /**
@@ -2676,7 +2708,7 @@ declare namespace LocalJSX {
          */
         "checked"?: boolean;
         /**
-          * If `true`, the user cannot interact with the checkbox.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -2715,6 +2747,10 @@ declare namespace LocalJSX {
           * Emitted when the toggle has focus.
          */
         "onBalFocus"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly"?: boolean;
         /**
           * A DOMString representing the value of the checkbox. This is not displayed on the client-side, but on the server this is the value given to the data submitted with the checkbox's name.
          */
@@ -2826,7 +2862,7 @@ declare namespace LocalJSX {
          */
         "defaultDate"?: string;
         /**
-          * If `true` the component is disabled.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -2886,7 +2922,7 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * If `true` the use can only select a date.
+          * If `true` the element can not mutated, meaning the user can not edit the control.
          */
         "readonly"?: boolean;
         /**
@@ -2953,7 +2989,7 @@ declare namespace LocalJSX {
     }
     interface BalField {
         /**
-          * If `true` the field loses opacity
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -2968,6 +3004,10 @@ declare namespace LocalJSX {
           * If `true` a loading spinner is visible at the end of the input
          */
         "loading"?: boolean;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly"?: boolean;
     }
     interface BalFieldControl {
         /**
@@ -3031,7 +3071,7 @@ declare namespace LocalJSX {
          */
         "accept"?: string;
         /**
-          * If `true` the button is disabled
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -3078,6 +3118,10 @@ declare namespace LocalJSX {
           * Triggers when a file is rejected due to not allowed MIME-Type and so on.
          */
         "onBalRejectedFile"?: (event: CustomEvent<FileUploadRejectedFile>) => void;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly"?: boolean;
         /**
           * Overrides the default subtitle file size
          */
@@ -3213,7 +3257,7 @@ declare namespace LocalJSX {
          */
         "decimal"?: number;
         /**
-          * If `true` the input is disabled
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         "hasIconRight"?: boolean;
@@ -3294,7 +3338,7 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * If `true`, the user cannot modify the value.
+          * If `true` the element can not mutated, meaning the user can not edit the control.
          */
         "readonly"?: boolean;
         /**
@@ -3334,7 +3378,7 @@ declare namespace LocalJSX {
          */
         "debounce"?: number;
         /**
-          * If `true` the input is disabled
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -3361,6 +3405,10 @@ declare namespace LocalJSX {
           * Emitted when the input value has changed.
          */
         "onBalInput"?: (event: CustomEvent<number | undefined>) => void;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly"?: boolean;
         /**
           * The steps in which the input increases or decreases
          */
@@ -3546,7 +3594,7 @@ declare namespace LocalJSX {
          */
         "decimal"?: number;
         /**
-          * If `true` the input is disabled
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -3586,7 +3634,7 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * If `true`, the user cannot modify the value.
+          * If `true` the element can not mutated, meaning the user can not edit the control.
          */
         "readonly"?: boolean;
         /**
@@ -3653,9 +3701,13 @@ declare namespace LocalJSX {
     }
     interface BalPopoverContent {
         /**
-          * If `true` the field spans over the whole width.
+          * Define the max width of the popover content.
          */
         "contentWidth"?: number;
+        /**
+          * If `true` the content has a min width of 100%.
+         */
+        "expanded"?: boolean;
         /**
           * Limit the height of the popover content. Pass the amount of pixel.
          */
@@ -3667,7 +3719,7 @@ declare namespace LocalJSX {
          */
         "checked"?: boolean;
         /**
-          * If `true`, the user cannot interact with the checkbox.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -3706,6 +3758,10 @@ declare namespace LocalJSX {
           * Emitted when the toggle has focus.
          */
         "onBalFocus"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly"?: boolean;
         /**
           * The value of the control.
          */
@@ -3713,7 +3769,7 @@ declare namespace LocalJSX {
     }
     interface BalRadioGroup {
         /**
-          * If `true`, the user cannot interact with the radios.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -3732,6 +3788,10 @@ declare namespace LocalJSX {
           * Emitted when the checked property has changed.
          */
         "onBalChange"?: (event: CustomEvent<number | string | boolean>) => void;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly"?: boolean;
         /**
           * The value of the control.
          */
@@ -3751,7 +3811,7 @@ declare namespace LocalJSX {
          */
         "balTabindex"?: number;
         /**
-          * If `true` the component is disabled.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -3818,6 +3878,10 @@ declare namespace LocalJSX {
           * The text to display when the select is empty.
          */
         "placeholder"?: string;
+        /**
+          * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        "readonly"?: boolean;
         /**
           * Defines the height of the popover list.
          */
@@ -3861,7 +3925,7 @@ declare namespace LocalJSX {
          */
         "debounce"?: number;
         /**
-          * If `true` the input is disabled
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -3905,7 +3969,7 @@ declare namespace LocalJSX {
          */
         "onBalKeyPress"?: (event: CustomEvent<KeyboardEvent>) => void;
         /**
-          * If `true`, the user cannot modify the value.
+          * If `true` the element can not mutated, meaning the user can not edit the control.
          */
         "readonly"?: boolean;
         /**
@@ -4151,7 +4215,7 @@ declare namespace LocalJSX {
          */
         "debounce"?: number;
         /**
-          * If `true`, the user cannot interact with the textarea.
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
          */
         "disabled"?: boolean;
         /**
@@ -4207,7 +4271,7 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * If `true`, the user cannot modify the value.
+          * If `true` the element can not mutated, meaning the user can not edit the control.
          */
         "readonly"?: boolean;
         /**
diff --git a/packages/components/src/components/bal-popover/bal-popover-content/bal-popover-content.tsx b/packages/components/src/components/bal-popover/bal-popover-content/bal-popover-content.tsx
index 573661a83d..4658efa9d5 100644
--- a/packages/components/src/components/bal-popover/bal-popover-content/bal-popover-content.tsx
+++ b/packages/components/src/components/bal-popover/bal-popover-content/bal-popover-content.tsx
@@ -12,17 +12,17 @@ export class PopoverContent {
   @Prop() scrollable = 0
 
   /**
-   * If `true` the field spans over the whole width.
+   * Define the max width of the popover content.
    */
   @Prop() contentWidth = 0
 
-  get contentStyle() {
-    let scrollable = {}
-    let contentWidth = {}
+  /**
+   * If `true` the content has a min width of 100%.
+   */
+  @Prop() expanded = false
 
-    if (this.contentWidth > 0) {
-      contentWidth = { 'max-width': this.contentWidth }
-    }
+  get innerStyle() {
+    let scrollable = {}
 
     if (this.scrollable > 0) {
       scrollable = {
@@ -33,14 +33,32 @@ export class PopoverContent {
 
     return {
       ...scrollable,
+    }
+  }
+
+  get contentStyle() {
+    let contentWidth = {}
+
+    if (this.contentWidth > 0) {
+      contentWidth = { 'max-width': `${this.contentWidth}px` }
+    }
+
+    return {
       ...contentWidth,
     }
   }
 
   render() {
     return (
-      <Host class="popover-content has-background-white has-radius-normal has-shadow" role="menu">
-        <div class="inner" style={this.contentStyle}>
+      <Host
+        class={{
+          'popover-content has-background-white has-radius-normal has-shadow': true,
+          'is-expanded': this.expanded,
+        }}
+        role="menu"
+        style={this.contentStyle}
+      >
+        <div class="inner" style={this.innerStyle}>
           <slot></slot>
         </div>
       </Host>
diff --git a/packages/components/src/components/bal-popover/bal-popover.scss b/packages/components/src/components/bal-popover/bal-popover.scss
index 06c1ec7feb..9bc178a436 100644
--- a/packages/components/src/components/bal-popover/bal-popover.scss
+++ b/packages/components/src/components/bal-popover/bal-popover.scss
@@ -16,6 +16,10 @@ bal-popover-content {
   display: none;
   z-index: 20;
   min-width: 260px;
+
+  &.is-expanded {
+    min-width: 100%;
+  }
 }
 
 bal-popover.is-active bal-popover-content {
diff --git a/packages/components/src/components/form/bal-checkbox/bal-checkbox.scss b/packages/components/src/components/form/bal-checkbox/bal-checkbox.scss
index 8407956c40..a3a06ebf32 100644
--- a/packages/components/src/components/form/bal-checkbox/bal-checkbox.scss
+++ b/packages/components/src/components/form/bal-checkbox/bal-checkbox.scss
@@ -97,7 +97,7 @@ bal-checkbox {
       transform: rotate(45deg);
     }
 
-    input[type='checkbox']:disabled:not(.is-disabled-hidden) + label {
+    input[type='checkbox'].is-disabled:not(.is-disabled-hidden) + label {
       cursor: not-allowed;
       opacity: 0.5;
     }
@@ -122,7 +122,7 @@ bal-checkbox {
         border-right: 2px solid $white;
       }
 
-      input[type='checkbox']:hover:not([disabled]) + label:before {
+      input[type='checkbox']:hover:not(.is-disabled) + label:before {
         border-color: $white;
       }
     }
diff --git a/packages/components/src/components/form/bal-checkbox/bal-checkbox.tsx b/packages/components/src/components/form/bal-checkbox/bal-checkbox.tsx
index 393d6cbfd3..56efa38ede 100644
--- a/packages/components/src/components/form/bal-checkbox/bal-checkbox.tsx
+++ b/packages/components/src/components/form/bal-checkbox/bal-checkbox.tsx
@@ -63,10 +63,15 @@ export class Checkbox implements ComponentInterface, FormInput<any> {
   @Prop({ mutable: true }) checked = false
 
   /**
-   * If `true`, the user cannot interact with the checkbox.
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
   @Prop() disabled = false
 
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
+   */
+  @Prop() readonly = false
+
   /**
    * If `true`, the value will not be send with a form submit
    */
@@ -163,7 +168,7 @@ export class Checkbox implements ComponentInterface, FormInput<any> {
         aria-focused={this.hasFocus ? 'true' : null}
         class={{
           'is-inverted': this.inverted,
-          'is-disabled': this.disabled,
+          'is-disabled': this.disabled || this.readonly,
           'is-focused': this.hasFocus,
           'bal-checkbox': this.interface === 'checkbox',
           'bal-switch': this.interface === 'switch',
@@ -172,7 +177,7 @@ export class Checkbox implements ComponentInterface, FormInput<any> {
       >
         <input
           class={{
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
             'is-disabled-hidden': this.hidden,
             'data-test-checkbox-input': true,
           }}
@@ -184,6 +189,7 @@ export class Checkbox implements ComponentInterface, FormInput<any> {
           value={this.value}
           aria-checked={`${this.checked}`}
           disabled={this.disabled || this.hidden}
+          readonly={this.readonly}
           onFocus={e => this.onInputFocus(e)}
           onBlur={e => this.onInputBlur(e)}
           onClick={this.onClick}
@@ -192,7 +198,7 @@ export class Checkbox implements ComponentInterface, FormInput<any> {
         <label
           class={{
             'option-label': true,
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
             'data-test-checkbox-label': true,
           }}
           htmlFor={this.inputId}
diff --git a/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts b/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts
index 66e6902c73..f7cc7b15c4 100644
--- a/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts
+++ b/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts
@@ -45,7 +45,7 @@ const SingleTemplate = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
       <bal-checkbox-group>
@@ -62,7 +62,7 @@ const GroupTemplate = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
       <bal-checkbox-group v-bind="args" v-model="args.value">
@@ -85,7 +85,7 @@ const Template = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
       <bal-checkbox-group :vertical="args.vertical">
diff --git a/packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx b/packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx
index 07b4f274c5..9abb48468b 100644
--- a/packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx
+++ b/packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx
@@ -123,14 +123,14 @@ export class Datepicker implements ComponentInterface, BalConfigObserver, FormIn
   @Prop() required = false
 
   /**
-   * If `true` the use can only select a date.
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
-  @Prop() readonly = false
+  @Prop() disabled = false
 
   /**
-   * If `true` the component is disabled.
+   * If `true` the element can not mutated, meaning the user can not edit the control.
    */
-  @Prop() disabled = false
+  @Prop() readonly = false
 
   /**
    * The text to display when the select is empty.
@@ -470,7 +470,7 @@ export class Datepicker implements ComponentInterface, BalConfigObserver, FormIn
   }
 
   private onIconClick = (event: MouseEvent) => {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.popoverElement.toggle()
     }
     stopEventBubbling(event)
@@ -478,7 +478,7 @@ export class Datepicker implements ComponentInterface, BalConfigObserver, FormIn
   }
 
   private onInputClick = (event: MouseEvent) => {
-    if (!this.triggerIcon && !this.disabled) {
+    if (!this.triggerIcon && !this.disabled && !this.readonly) {
       this.popoverElement.toggle()
     }
     stopEventBubbling(event)
@@ -589,7 +589,7 @@ export class Datepicker implements ComponentInterface, BalConfigObserver, FormIn
         onClick={this.handleClick}
         aria-disabled={this.disabled ? 'true' : null}
         class={{
-          'is-disabled': this.disabled,
+          'is-disabled': this.disabled || this.readonly,
         }}
       >
         <bal-popover onBalChange={this.onPopoverChange} ref={el => (this.popoverElement = el as HTMLBalPopoverElement)}>
@@ -622,9 +622,9 @@ export class Datepicker implements ComponentInterface, BalConfigObserver, FormIn
           class={{
             'input': true,
             'data-test-input': true,
-            'clickable': !this.disabled && !this.triggerIcon,
+            'clickable': !this.disabled && !this.readonly && !this.triggerIcon,
             'is-inverted': this.inverted,
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
             'is-danger': this.invalid,
           }}
           ref={el => (this.nativeInput = el as HTMLInputElement)}
diff --git a/packages/components/src/components/form/bal-datepicker/stories/bal-datepicker.stories.ts b/packages/components/src/components/form/bal-datepicker/stories/bal-datepicker.stories.ts
index c93da64b0b..83118aaf5f 100644
--- a/packages/components/src/components/form/bal-datepicker/stories/bal-datepicker.stories.ts
+++ b/packages/components/src/components/form/bal-datepicker/stories/bal-datepicker.stories.ts
@@ -34,7 +34,7 @@ const component = BalComponentStory({
 
 export default component.story
 
-const excludedControls = ['allowedDates', 'readonly', 'name', 'required']
+const excludedControls = ['allowedDates', 'name', 'required']
 
 const Template = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
@@ -45,7 +45,7 @@ const Template = args => ({
     }
   },
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
   <bal-field-label>Label</bal-field-label>
   <bal-field-control>
     <bal-datepicker v-bind="args" v-model="args.value"></bal-datepicker>
diff --git a/packages/components/src/components/form/bal-field/bal-field.tsx b/packages/components/src/components/form/bal-field/bal-field.tsx
index e233972521..0f2b679016 100644
--- a/packages/components/src/components/form/bal-field/bal-field.tsx
+++ b/packages/components/src/components/form/bal-field/bal-field.tsx
@@ -12,10 +12,15 @@ export class Field {
   @Prop() invalid = false
 
   /**
-   * If `true` the field loses opacity
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
   @Prop() disabled = false
 
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
+   */
+  @Prop() readonly = false
+
   /**
    * If `true` the field can be used on blue background.
    */
@@ -37,13 +42,15 @@ export class Field {
     })
   }
 
+  @Watch('readonly')
   @Watch('disabled')
   @Watch('loading')
   @Watch('inverted')
   restHandler() {
-    this.notifyComponents<{ disabled: boolean; loading: boolean; inverted: boolean }>(
+    this.notifyComponents<{ readonly: boolean; disabled: boolean; loading: boolean; inverted: boolean }>(
       [...this.inputElements, ...this.formControlElement],
       input => {
+        input.readonly = this.readonly
         input.disabled = this.disabled
         input.loading = this.loading
         input.inverted = this.inverted
@@ -72,7 +79,7 @@ export class Field {
           class={{
             'form': true,
             'is-inverted': this.inverted,
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
           }}
         >
           <slot></slot>
diff --git a/packages/components/src/components/form/bal-file-upload/bal-file-upload.tsx b/packages/components/src/components/form/bal-file-upload/bal-file-upload.tsx
index 45dda3990a..cb98a6170c 100644
--- a/packages/components/src/components/form/bal-file-upload/bal-file-upload.tsx
+++ b/packages/components/src/components/form/bal-file-upload/bal-file-upload.tsx
@@ -37,10 +37,15 @@ export class FileUpload {
   @Prop() hasFileList = true
 
   /**
-   * If `true` the button is disabled
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
   @Prop() disabled = false
 
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
+   */
+  @Prop() readonly = false
+
   /**
    * Accepted MIME-Types like `image/png,image/jpeg`.
    */
@@ -98,28 +103,28 @@ export class FileUpload {
 
   @Listen('dragenter', { capture: false, passive: false })
   dragenterHandler() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.isOver = true
     }
   }
 
   @Listen('dragover', { capture: false, passive: false })
   dragoverHandler() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.isOver = true
     }
   }
 
   @Listen('dragleave', { capture: false, passive: false })
   dragleaveHandler() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.isOver = false
     }
   }
 
   @Listen('drop', { capture: false, passive: false })
   dropHandler(event: DragEvent) {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.isOver = false
       const dataTransfer = event.dataTransfer
       if (dataTransfer) {
@@ -213,7 +218,7 @@ export class FileUpload {
   }
 
   removeFile(indexToRemove: number): void {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       const list = []
       const removedFiles = []
       for (let index = 0; index < this.files.length; index++) {
@@ -260,13 +265,13 @@ export class FileUpload {
     )
 
     return (
-      <Host class={['bal-file-upload', this.disabled || this.loading ? 'is-disabled' : ''].join(' ')}>
+      <Host class={['bal-file-upload', this.disabled || this.loading || this.readonly ? 'is-disabled' : ''].join(' ')}>
         <div class="file">
           <label
             class={[
               'file-label',
               this.isOver ? 'is-hovered' : '',
-              this.disabled || this.loading ? 'is-disabled' : '',
+              this.disabled || this.loading || this.readonly ? 'is-disabled' : '',
             ].join(' ')}
           >
             <input
@@ -275,6 +280,7 @@ export class FileUpload {
               name="resume"
               multiple={this.multiple}
               disabled={this.disabled || this.loading}
+              readonly={this.readonly}
               accept={this.accept}
               onChange={this.onChange}
               ref={el => (this.fileInput = el as HTMLInputElement)}
diff --git a/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.tsx b/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.tsx
index ede7a6b415..93c09c56b5 100644
--- a/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.tsx
+++ b/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.tsx
@@ -62,10 +62,15 @@ export class InputStepper implements ComponentInterface, BalConfigObserver, Form
   @Prop() steps = 1
 
   /**
-   * If `true` the input is disabled
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
   @Prop() disabled = false
 
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
+   */
+  @Prop() readonly = false
+
   /**
    * If `true` the input is shown as invalid
    */
@@ -157,7 +162,7 @@ export class InputStepper implements ComponentInterface, BalConfigObserver, Form
       <Host
         aria-disabled={this.disabled ? 'true' : null}
         class={{
-          'is-disabled': this.disabled,
+          'is-disabled': this.disabled || this.readonly,
           'is-invalid': this.invalid,
         }}
       >
@@ -168,10 +173,10 @@ export class InputStepper implements ComponentInterface, BalConfigObserver, Form
             outlined={!this.invalid}
             icon="minus"
             color={this.invalid ? 'danger' : 'info'}
-            disabled={this.disabled || this.value <= this.min}
+            disabled={this.disabled || this.readonly || this.value <= this.min}
             onClick={_ => this.decrease()}
           ></bal-button>
-          <bal-text color={this.disabled ? 'hint' : this.invalid ? 'danger' : ''} bold>
+          <bal-text color={this.disabled || this.readonly ? 'hint' : this.invalid ? 'danger' : ''} bold>
             {formatLocaleNumber(`${this.language}-${this.region}`, this.value)}
           </bal-text>
           <bal-button
@@ -180,7 +185,7 @@ export class InputStepper implements ComponentInterface, BalConfigObserver, Form
             outlined={!this.invalid}
             icon="plus"
             color={this.invalid ? 'danger' : 'info'}
-            disabled={this.disabled || this.value >= this.max}
+            disabled={this.disabled || this.readonly || this.value >= this.max}
             onClick={_ => this.increase()}
           ></bal-button>
         </div>
@@ -191,6 +196,7 @@ export class InputStepper implements ComponentInterface, BalConfigObserver, Form
           ref={inputEl => (this.nativeInput = inputEl)}
           id={this.inputId}
           aria-labelledby={labelId}
+          readonly={this.readonly}
           disabled={this.disabled}
           {...this.inheritedAttributes}
         />
diff --git a/packages/components/src/components/form/bal-input/bal-input.tsx b/packages/components/src/components/form/bal-input/bal-input.tsx
index 4ab1413059..55c53a7ba6 100644
--- a/packages/components/src/components/form/bal-input/bal-input.tsx
+++ b/packages/components/src/components/form/bal-input/bal-input.tsx
@@ -153,14 +153,14 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
   @Prop() inverted = false
 
   /**
-   * If `true`, the user cannot modify the value.
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
-  @Prop() readonly = false
+  @Prop() disabled = false
 
   /**
-   * If `true` the input is disabled
+   * If `true` the element can not mutated, meaning the user can not edit the control.
    */
-  @Prop() disabled = false
+  @Prop() readonly = false
 
   /**
    * If `true` the input gets a clickable cursor style
@@ -398,12 +398,12 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
           value={numberValue}
           name={this.name}
           disabled={this.disabled}
+          readonly={this.readonly}
           invalid={this.invalid}
           decimal={this.decimal}
           suffix={this.suffix}
           placeholder={this.placeholder}
           required={this.required}
-          readonly={this.readonly}
           debounce={this.debounce}
           onBalFocus={e => this.balFocus.emit(e.detail)}
           onBalBlur={e => this.balBlur.emit(e.detail)}
@@ -443,13 +443,13 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
         onClick={this.handleClick}
         aria-disabled={this.disabled ? 'true' : null}
         class={{
-          'is-disabled': this.disabled,
+          'is-disabled': this.disabled || this.readonly,
         }}
       >
         <input
           class={{
             'input': true,
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
             'is-danger': this.invalid,
             'is-inverted': this.inverted,
             'clickable': this.clickable,
@@ -472,7 +472,7 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
           multiple={this.multiple}
           name={this.name}
           placeholder={this.placeholder || ''}
-          readOnly={this.readonly}
+          readonly={this.readonly}
           required={this.required}
           spellcheck={this.spellcheck}
           type={this.type}
diff --git a/packages/components/src/components/form/bal-input/stories/bal-input.stories.ts b/packages/components/src/components/form/bal-input/stories/bal-input.stories.ts
index 046d64b2a1..6eec2b7779 100644
--- a/packages/components/src/components/form/bal-input/stories/bal-input.stories.ts
+++ b/packages/components/src/components/form/bal-input/stories/bal-input.stories.ts
@@ -46,7 +46,6 @@ const excludedControls = [
   'min',
   'max',
   'name',
-  'readonly',
   'required',
   'accept',
 ]
@@ -55,7 +54,7 @@ const Template = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
     <bal-input v-bind="args" v-model="args.value"></bal-input>
diff --git a/packages/components/src/components/form/bal-number-input/bal-number-input.tsx b/packages/components/src/components/form/bal-number-input/bal-number-input.tsx
index 0102ab124b..85d02a934a 100644
--- a/packages/components/src/components/form/bal-number-input/bal-number-input.tsx
+++ b/packages/components/src/components/form/bal-number-input/bal-number-input.tsx
@@ -89,14 +89,14 @@ export class NumberInput implements ComponentInterface, BalConfigObserver, FormI
   @Prop() required = false
 
   /**
-   * If `true`, the user cannot modify the value.
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
-  @Prop() readonly = false
+  @Prop() disabled = false
 
   /**
-   * If `true` the input is disabled
+   * If `true` the element can not mutated, meaning the user can not edit the control.
    */
-  @Prop() disabled = false
+  @Prop() readonly = false
 
   /**
    * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
@@ -289,13 +289,13 @@ export class NumberInput implements ComponentInterface, BalConfigObserver, FormI
         onClick={this.handleClick}
         aria-disabled={this.disabled ? 'true' : null}
         class={{
-          'is-disabled': this.disabled,
+          'is-disabled': this.disabled || this.readonly,
         }}
       >
         <input
           class={{
             'input': true,
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
             'is-danger': this.invalid,
           }}
           ref={input => (this.nativeInput = input)}
@@ -304,7 +304,7 @@ export class NumberInput implements ComponentInterface, BalConfigObserver, FormI
           name={this.name}
           disabled={this.disabled}
           placeholder={this.placeholder || ''}
-          readOnly={this.readonly}
+          readonly={this.readonly}
           required={this.required}
           pattern={'[0-9]*'}
           value={value}
diff --git a/packages/components/src/components/form/bal-number-input/stories/bal-number-input.stories.ts b/packages/components/src/components/form/bal-number-input/stories/bal-number-input.stories.ts
index 1eff5af886..08e1b8ce56 100644
--- a/packages/components/src/components/form/bal-number-input/stories/bal-number-input.stories.ts
+++ b/packages/components/src/components/form/bal-number-input/stories/bal-number-input.stories.ts
@@ -45,7 +45,7 @@ const Template = args => ({
     }
   },
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
     <bal-number-input v-bind="args" v-model="args.value"></bal-number-input>
diff --git a/packages/components/src/components/form/bal-radio/bal-radio-group/bal-radio-group.tsx b/packages/components/src/components/form/bal-radio/bal-radio-group/bal-radio-group.tsx
index d460a4fa1a..e95b64e330 100644
--- a/packages/components/src/components/form/bal-radio/bal-radio-group/bal-radio-group.tsx
+++ b/packages/components/src/components/form/bal-radio/bal-radio-group/bal-radio-group.tsx
@@ -45,15 +45,9 @@ export class RadioGroup implements ComponentInterface {
   @Prop() vertical = false
 
   /**
-   * If `true`, the user cannot interact with the radios.
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
   @Prop() disabled?: boolean = undefined
-
-  /**
-   * If `true`, the controls will be vertically on mobile devices.
-   */
-  @Prop() verticalOnMobile = false
-
   @Watch('disabled')
   disabledChanged(value: boolean | undefined) {
     if (value !== undefined) {
@@ -63,6 +57,24 @@ export class RadioGroup implements ComponentInterface {
     }
   }
 
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
+   */
+  @Prop() readonly?: boolean = undefined
+  @Watch('readonly')
+  readonlyChanged(value: boolean | undefined) {
+    if (value !== undefined) {
+      this.radios.forEach(radio => {
+        radio.readonly = value
+      })
+    }
+  }
+
+  /**
+   * If `true`, the controls will be vertically on mobile devices.
+   */
+  @Prop() verticalOnMobile = false
+
   /**
    * The value of the control.
    */
@@ -91,6 +103,7 @@ export class RadioGroup implements ComponentInterface {
     this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title'])
     this.sync()
     this.disabledChanged(this.disabled)
+    this.readonlyChanged(this.readonly)
   }
 
   private get radios(): HTMLBalRadioElement[] {
@@ -120,7 +133,7 @@ export class RadioGroup implements ComponentInterface {
 
     const selectedRadio = ev.target && (ev.target as HTMLElement).closest('bal-radio')
     if (selectedRadio) {
-      if (selectedRadio.disabled) {
+      if (selectedRadio.disabled || selectedRadio.readonly) {
         ev.stopPropagation()
         return
       }
diff --git a/packages/components/src/components/form/bal-radio/bal-radio.tsx b/packages/components/src/components/form/bal-radio/bal-radio.tsx
index bf8c908f25..406b301452 100644
--- a/packages/components/src/components/form/bal-radio/bal-radio.tsx
+++ b/packages/components/src/components/form/bal-radio/bal-radio.tsx
@@ -72,10 +72,15 @@ export class Radio implements ComponentInterface, FormInput<any> {
   @Prop({ mutable: true }) checked = false
 
   /**
-   * If `true`, the user cannot interact with the checkbox.
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
   @Prop() disabled = false
 
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
+   */
+  @Prop() readonly = false
+
   /**
    * If `true`, the control works on dark background.
    */
@@ -154,7 +159,7 @@ export class Radio implements ComponentInterface, FormInput<any> {
   private onInputBlur = (ev: FocusEvent) => inputHandleBlur<any>(this, ev)
 
   private onClick = (ev: MouseEvent) => {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.balChange.emit(this.checked)
       this.balClick.emit(ev)
     } else {
@@ -177,7 +182,7 @@ export class Radio implements ComponentInterface, FormInput<any> {
           'bal-radio': this.interface === 'radio',
           'bal-select-button': this.interface === 'select-button',
           'is-inverted': this.inverted,
-          'is-disabled': this.disabled,
+          'is-disabled': this.disabled || this.readonly,
           'is-focused': this.hasFocus,
         }}
         onClick={this.onClick}
@@ -187,7 +192,7 @@ export class Radio implements ComponentInterface, FormInput<any> {
       >
         <input
           class={{
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
             'data-test-radio-input': true,
           }}
           type="radio"
@@ -196,6 +201,7 @@ export class Radio implements ComponentInterface, FormInput<any> {
           tabindex={-1}
           value={value}
           disabled={this.disabled}
+          readonly={this.readonly}
           checked={this.checked}
           onFocus={e => this.onInputFocus(e)}
           onBlur={e => this.onInputBlur(e)}
@@ -204,7 +210,7 @@ export class Radio implements ComponentInterface, FormInput<any> {
         <label
           class={{
             'option-label': true,
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
             'data-test-radio-label': true,
           }}
           htmlFor={inputId}
diff --git a/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts b/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts
index dfbc7024de..884c1a5902 100644
--- a/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts
+++ b/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts
@@ -27,6 +27,7 @@ const component = BalComponentStory({
     },
   },
   args: {
+    readOnly: false,
     invalid: false,
     vertical: false,
     hasFieldMessage: true,
@@ -41,13 +42,14 @@ export const Basic = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
   <bal-field-label>Label</bal-field-label>
   <bal-field-control>
     <bal-radio-group v-bind="args" v-model="args.value">
       <bal-radio name="radio-example" value="1">Label 1</bal-radio>
       <bal-radio name="radio-example" value="2">Label 2</bal-radio>
-      <bal-radio name="radio-example" value="3">Random text with a <a class="is-link" target="_blank" href="http://baloise.ch">Link</a> in it</bal-radio>
+      <bal-radio name="radio-example" value="3" disabled>Disabled</bal-radio>
+      <bal-radio name="radio-example" value="4">Random text with a <a class="is-link" target="_blank" href="http://baloise.ch">Link</a> in it</bal-radio>
     </bal-radio-group>
   </bal-field-control>
   <bal-field-message :color="args.invalid ? 'danger' : 'hint'" v-if="args.hasFieldMessage">Field Message</bal-field-message>
@@ -135,7 +137,7 @@ export const SelectButton = args => ({
   components: { ...component.components, BalField, BalFieldLabel, BalFieldControl, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
   <bal-field-label>Label</bal-field-label>
   <bal-field-control>
     <bal-radio-group v-bind="args" v-model="args.value">
@@ -157,7 +159,7 @@ export const YesNo = args => ({
   components: { ...component.components, BalField, BalFieldLabel, BalFieldControl, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
   <bal-field-label>Label</bal-field-label>
   <bal-field-control>
     <bal-radio-group v-bind="args" v-model="args.value">
diff --git a/packages/components/src/components/form/bal-select/bal-select.scss b/packages/components/src/components/form/bal-select/bal-select.scss
index c43e61d1ea..9352bdf0ab 100644
--- a/packages/components/src/components/form/bal-select/bal-select.scss
+++ b/packages/components/src/components/form/bal-select/bal-select.scss
@@ -9,6 +9,12 @@ bal-select {
 
   &.is-disabled {
     background: $blue-0;
+    cursor: not-allowed !important;
+
+    input,
+    bal-icon {
+      cursor: not-allowed !important;
+    }
   }
 
   .bal-select__slot {
@@ -22,6 +28,10 @@ bal-select {
     padding-bottom: 1px;
     margin-top: -1px;
 
+    & > bal-icon {
+      cursor: pointer;
+    }
+
     &.is-danger {
       border-color: $danger;
     }
diff --git a/packages/components/src/components/form/bal-select/bal-select.tsx b/packages/components/src/components/form/bal-select/bal-select.tsx
index 394681da23..be0ac0fbe7 100644
--- a/packages/components/src/components/form/bal-select/bal-select.tsx
+++ b/packages/components/src/components/form/bal-select/bal-select.tsx
@@ -102,10 +102,15 @@ export class Select {
   @Prop() selectionOptional = false
 
   /**
-   * If `true` the component is disabled.
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
   @Prop() disabled = false
 
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
+   */
+  @Prop() readonly = false
+
   /**
    * Set this to `true` when the component is placed on a dark background.
    */
@@ -337,7 +342,7 @@ export class Select {
    */
   @Method()
   async open(): Promise<void> {
-    if (!this.disabled && !isNil(this.popoverElement)) {
+    if (!this.disabled && !this.readonly && !isNil(this.popoverElement)) {
       await this.popoverElement.present()
     }
   }
@@ -347,7 +352,7 @@ export class Select {
    */
   @Method()
   async close(): Promise<void> {
-    if (!this.disabled && !isNil(this.popoverElement)) {
+    if (!this.disabled && !this.readonly && !isNil(this.popoverElement)) {
       await this.popoverElement.dismiss()
     }
   }
@@ -627,7 +632,7 @@ export class Select {
    ********************************************************/
 
   private handleClick = (event: MouseEvent) => {
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       preventDefault(event)
     }
   }
@@ -657,7 +662,7 @@ export class Select {
   }
 
   private handleInputClick = async (event: MouseEvent) => {
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       preventDefault(event)
     } else {
       this.focusIndex = 0
@@ -684,13 +689,13 @@ export class Select {
   }
 
   private handleInputChange = (event: Event) => {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.inputValue = (event.target as HTMLInputElement).value
     }
   }
 
   private handleInput = async (event: Event) => {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.inputValue = (event.target as HTMLInputElement).value
 
       if (!this.isPopoverOpen) {
@@ -732,7 +737,7 @@ export class Select {
         aria-disabled={this.disabled ? 'true' : null}
         data-value={this.rawValue?.map(v => findLabelByValue(this.options, v)).join(',')}
         class={{
-          'is-disabled': this.disabled,
+          'is-disabled': this.disabled || this.readonly,
           'is-inverted': this.inverted,
         }}
       >
@@ -768,12 +773,12 @@ export class Select {
                   'input': true,
                   'is-inverted': this.inverted,
                   'is-danger': this.invalid,
-                  'is-clickable': !this.isPopoverOpen,
+                  'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly,
                   'data-test-select-input': true,
                 }}
                 autocomplete={'off'}
                 placeholder={this.inputPlaceholder}
-                readOnly={!this.typeahead}
+                readonly={!this.typeahead || this.disabled || this.readonly}
                 disabled={this.disabled}
                 tabindex={this.balTabindex}
                 onInput={this.handleInput}
@@ -798,7 +803,7 @@ export class Select {
               onClick={this.handleInputClick}
             ></bal-icon>
           </div>
-          <bal-popover-content scrollable={this.scrollable}>
+          <bal-popover-content scrollable={this.scrollable} expanded>
             {this.optionArray.map((option: BalOptionController, index: number) => (
               <button
                 type="button"
diff --git a/packages/components/src/components/form/bal-select/stories/bal-select.stories.ts b/packages/components/src/components/form/bal-select/stories/bal-select.stories.ts
index b8e37a2259..66cb90782d 100644
--- a/packages/components/src/components/form/bal-select/stories/bal-select.stories.ts
+++ b/packages/components/src/components/form/bal-select/stories/bal-select.stories.ts
@@ -40,7 +40,7 @@ export const Basic = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
       <bal-select v-bind="args" v-model="args.value">
diff --git a/packages/components/src/components/form/bal-slider/bal-slider.tsx b/packages/components/src/components/form/bal-slider/bal-slider.tsx
index 1dcdb33d3c..e39f14e4f1 100644
--- a/packages/components/src/components/form/bal-slider/bal-slider.tsx
+++ b/packages/components/src/components/form/bal-slider/bal-slider.tsx
@@ -38,14 +38,14 @@ export class Slider {
   @Prop() balTabindex = 0
 
   /**
-   * If `true`, the user cannot modify the value.
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
    */
-  @Prop() readonly = false
+  @Prop() disabled = false
 
   /**
-   * If `true` the input is disabled
+   * If `true` the element can not mutated, meaning the user can not edit the control.
    */
-  @Prop() disabled = false
+  @Prop() readonly = false
 
   /**
    * If `true`, the user must fill in a value before submitting a form.
@@ -176,7 +176,7 @@ export class Slider {
   }
 
   private handleClick = (event: MouseEvent) => {
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       event.preventDefault()
       event.stopPropagation()
     }
@@ -194,7 +194,7 @@ export class Slider {
   }
 
   private onClick = (ev: MouseEvent) => {
-    if (!this.disabled) {
+    if (!this.disabled && !this.readonly) {
       this.balClick.emit(ev)
     }
   }
@@ -204,10 +204,10 @@ export class Slider {
       <Host
         class={{
           'is-fullwidth': true,
-          'is-disabled': this.disabled,
+          'is-disabled': this.disabled || this.readonly,
         }}
         onClick={this.handleClick}
-        aria-disabled={this.disabled ? 'true' : null}
+        aria-disabled={this.disabled || this.readonly ? 'true' : null}
       >
         <div class="slider-bg">
           <div
@@ -235,7 +235,7 @@ export class Slider {
             ref={inputEl => (this.nativeInput = inputEl)}
             id={this.inputId}
             disabled={this.disabled}
-            readOnly={this.readonly}
+            readonly={this.readonly}
             name={this.name}
             required={this.required}
             tabIndex={this.balTabindex}
diff --git a/packages/components/src/components/form/bal-slider/stories/bal-slider.stories.ts b/packages/components/src/components/form/bal-slider/stories/bal-slider.stories.ts
index d2217830c7..f3f62c4211 100644
--- a/packages/components/src/components/form/bal-slider/stories/bal-slider.stories.ts
+++ b/packages/components/src/components/form/bal-slider/stories/bal-slider.stories.ts
@@ -35,7 +35,7 @@ export const Basic = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readOnly" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
       <bal-slider v-bind="args" v-model="args.value"></bal-slider>
diff --git a/packages/components/src/components/form/bal-textarea/bal-textarea.tsx b/packages/components/src/components/form/bal-textarea/bal-textarea.tsx
index 28668d927b..84873d1ad9 100644
--- a/packages/components/src/components/form/bal-textarea/bal-textarea.tsx
+++ b/packages/components/src/components/form/bal-textarea/bal-textarea.tsx
@@ -71,11 +71,6 @@ export class Textarea implements ComponentInterface, FormInput<string | undefine
     this.balChange = debounceEvent(this.balChange, this.debounce)
   }
 
-  /**
-   * If `true`, the user cannot interact with the textarea.
-   */
-  @Prop() disabled = false
-
   /**
    * Instructional text that shows before the input has a value.
    */
@@ -97,7 +92,12 @@ export class Textarea implements ComponentInterface, FormInput<string | undefine
   @Prop() inverted = false
 
   /**
-   * If `true`, the user cannot modify the value.
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+   */
+  @Prop() disabled = false
+
+  /**
+   * If `true` the element can not mutated, meaning the user can not edit the control.
    */
   @Prop() readonly = false
 
@@ -257,14 +257,14 @@ export class Textarea implements ComponentInterface, FormInput<string | undefine
         onClick={this.handleClick}
         aria-disabled={this.disabled ? 'true' : null}
         class={{
-          'is-disabled': this.disabled,
+          'is-disabled': this.disabled || this.readonly,
         }}
       >
         <textarea
           class={{
             'textarea': true,
             'is-inverted': this.inverted,
-            'is-disabled': this.disabled,
+            'is-disabled': this.disabled || this.readonly,
             'is-danger': this.invalid,
             'clickable': this.clickable,
           }}
@@ -273,6 +273,7 @@ export class Textarea implements ComponentInterface, FormInput<string | undefine
           id={this.inputId}
           aria-labelledby={labelId}
           disabled={this.disabled}
+          readonly={this.readonly}
           autoCapitalize={this.autocapitalize}
           autoFocus={this.autofocus}
           minLength={this.minLength}
@@ -280,7 +281,6 @@ export class Textarea implements ComponentInterface, FormInput<string | undefine
           placeholder={this.placeholder}
           inputMode={this.inputmode}
           value={this.value}
-          readonly={this.readonly}
           cols={this.cols}
           rows={this.rows}
           wrap={this.wrap}
diff --git a/packages/components/src/components/form/bal-textarea/stories/bal-textarea.stories.ts b/packages/components/src/components/form/bal-textarea/stories/bal-textarea.stories.ts
index 8477b61a79..bd8baab098 100644
--- a/packages/components/src/components/form/bal-textarea/stories/bal-textarea.stories.ts
+++ b/packages/components/src/components/form/bal-textarea/stories/bal-textarea.stories.ts
@@ -39,7 +39,6 @@ const excludedControls = [
   'maxLength',
   'minLength',
   'name',
-  'readonly',
   'required',
 ]
 
@@ -47,7 +46,7 @@ const Template = args => ({
   components: { ...component.components, BalField, BalFieldControl, BalFieldLabel, BalFieldMessage },
   setup: () => ({ args }),
   template: `
-  <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
+  <bal-field :disabled="args.disabled" :readonly="args.readonly" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
       <bal-textarea v-bind="args" v-model="args.value"></bal-textarea>
@@ -60,6 +59,7 @@ export const Basic = Template.bind({})
 Basic.args = {
   placeholder: 'Enter a comment',
   disabled: false,
+  readonly: false,
   inverted: false,
   value: '',
 }
diff --git a/packages/components/src/styles/form/input-textarea.scss b/packages/components/src/styles/form/input-textarea.scss
index d6efba0d68..2d04359525 100644
--- a/packages/components/src/styles/form/input-textarea.scss
+++ b/packages/components/src/styles/form/input-textarea.scss
@@ -38,6 +38,7 @@ textarea.textarea {
       border-bottom-color: $white;
     }
 
+    &.is-disabled,
     &:disabled {
       background-color: $blue-8;
     }
@@ -102,3 +103,16 @@ input[type='checkbox'] + label {
     font-size: $size-normal !important;
   }
 }
+
+input.input,
+textarea.textarea {
+  &.is-disabled {
+    color: $input-disabled-color;
+    background: $input-disabled-background-color;
+    border-color: $input-disabled-border-color;
+    ::placeholder,
+    :-ms-input-placeholder {
+      color: $input-disabled-placeholder-color;
+    }
+  }
+}
diff --git a/packages/components/src/styles/form/shared.scss b/packages/components/src/styles/form/shared.scss
index 22d3235792..b532fbecc1 100644
--- a/packages/components/src/styles/form/shared.scss
+++ b/packages/components/src/styles/form/shared.scss
@@ -16,7 +16,7 @@
   }
 
   &.is-disabled {
-    .label,
+    label.label,
     .help,
     .control {
       opacity: 0.6;
@@ -24,7 +24,7 @@
   }
 
   &.is-inverted {
-    .label {
+    label.label {
       color: $white;
     }
 
@@ -39,18 +39,18 @@ label.label {
   font-family: $family-primary;
 }
 
-.form .label,
+.form label.label,
 .form .help {
   font-family: $family-primary;
 }
 
-.form .label {
+.form label.label {
   font-size: $size-small !important;
   margin-bottom: 0 !important;
 }
 
 @include desktop() {
-  .form .label {
+  .form label.label {
     font-size: $size-small !important;
   }
 }