Feat: Readonly state for boolean inputs (Checkbox & Toggle)

packages/uui-boolean-input/lib/uui-boolean-input.element.ts

@@ -85,6 +85,15 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
   @query('#input')
   protected _input!: HTMLInputElement;
 
@@ -176,7 +185,7 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
           id="input"
           type="checkbox"
           @change="${this._onInputChange}"
-          .disabled=${this.disabled}
+          .disabled=${this.disabled || this.readonly}
           .checked=${this.checked}
           aria-checked="${this.checked ? 'true' : 'false'}"
           aria-label=${this.label}
@@ -196,14 +205,18 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
         position: relative;
         cursor: pointer;
         user-select: none;
-
         display: flex;
         flex-wrap: nowrap;
         align-items: center;
         justify-items: center;
         gap: var(--uui-size-3);
       }
 
+      :host([readonly]) label {
+        cursor: text;
+        user-select: auto;
+      }
+
       input {
         position: absolute;
         height: 0px;

packages/uui-checkbox/lib/uui-checkbox.element.ts

@@ -86,9 +86,11 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
       input:checked:not([disabled]) + #ticker {
         border-color: var(--uui-color-selected);
       }
+
       label:hover input:checked:not([disabled]) + #ticker {
         border-color: var(--uui-color-selected-emphasis);
       }
+
       label:focus input:checked + #ticker {
         border-color: var(--uui-color-selected-emphasis);
       }
@@ -144,7 +146,10 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
           var(--uui-color-focus);
       }
 
-      :host(:not([disabled])) label:active input:checked + #ticker::before {
+      :host(:not([disabled], [readonly]))
+        label:active
+        input:checked
+        + #ticker::before {
         /** Stretch when mouse down */
         transform: scale(0.9);
       }

packages/uui-checkbox/lib/uui-checkbox.story.ts

@@ -15,6 +15,7 @@ export default {
     label: 'label',
     labelPosition: 'right',
     disabled: false,
+    readonly: false,
     checked: false,
     '--uui-checkbox-size': '18px',
   },
@@ -42,6 +43,7 @@ export const AAAOverview: Story = props => html`
     .label=${props.label}
     .labelPosition=${props.labelPosition}
     ?disabled=${props.disabled}
+    ?readonly=${props.readonly}
     ?checked=${props.checked}
     >${props.slot}</uui-checkbox
   >
@@ -157,3 +159,19 @@ Disabled.parameters = {
     },
   },
 };
+
+export const Readonly: Story = props => html`
+  <uui-checkbox
+    ?readonly=${props.readonly}
+    .label=${'Readonly'}
+    checked></uui-checkbox>
+`;
+Readonly.args = { readonly: true };
+Readonly.parameters = {
+  controls: { include: ['readonly'] },
+  docs: {
+    source: {
+      code: `<uui-checkbox label="Readonly" checked readonly></uui-checkbox>`,
+    },
+  },
+};

packages/uui-toggle/lib/uui-toggle.element.ts

@@ -72,6 +72,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
           var(--uui-toggle-border-color, var(--uui-color-border-standalone));
         font-size: calc(var(--uui-toggle-size) * 0.6);
       }
+
       label:hover input:not([disabled]) ~ #slider {
         border-color: var(
           --uui-toggle-border-color-hover,
@@ -82,6 +83,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
           var(--uui-color-border)
         );
       }
+
       label:focus #slider {
         border-color: var(
           --uui-toggle-border-color-focus,
@@ -92,12 +94,15 @@ export class UUIToggleElement extends UUIBooleanInputElement {
           var(--uui-color-surface-emphasis)
         );
       }
+
       input:checked ~ #slider {
         background-color: var(--uui-color-selected);
       }
+
       label:hover input:checked:not([disabled]) ~ #slider {
         background-color: var(--uui-color-selected-emphasis);
       }
+
       label:focus input:checked ~ #slider {
         background-color: var(--uui-color-selected-emphasis);
       }
@@ -123,6 +128,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
         right: calc(var(--uui-toggle-size) * 0.5);
         color: var(--uui-color-interactive);
       }
+
       input:checked ~ #slider #icon-checked {
         color: var(--uui-color-selected-contrast);
       }
@@ -153,7 +159,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
           var(--uui-color-focus);
       }
 
-      :host(:not([disabled])) label:active #slider::after {
+      :host(:not([disabled], [readonly])) label:active #slider::after {
         /** Stretch when mouse down */
         width: calc(1.06 * var(--uui-toggle-size));
       }

packages/uui-toggle/lib/uui-toggle.story.ts

@@ -15,6 +15,7 @@ export default {
     label: 'label',
     labelPosition: 'right',
     disabled: false,
+    readonly: false,
     checked: false,
     '--uui-toggle-size': '18px',
     '--uui-toggle-switch-width': '36px',
@@ -38,6 +39,7 @@ export const AAAOverview: Story = props => html`
     .label=${props.label}
     .labelPosition=${props.labelPosition}
     ?disabled=${props.disabled}
+    ?readonly=${props.readonly}
     ?checked=${props.checked}
     >${props.slot}</uui-toggle
   >
@@ -150,3 +152,16 @@ Disabled.parameters = {
     },
   },
 };
+
+export const Readonly: Story = props => html`
+  <uui-toggle ?readonly=${props.readonly} label="Readonly" checked></uui-toggle>
+`;
+Readonly.args = { readonly: true };
+Readonly.parameters = {
+  controls: { include: ['readonly'] },
+  docs: {
+    source: {
+      code: `<uui-toggle readonly>Readonly</uui-toggle>`,
+    },
+  },
+};