fix(input): address activation quirks

core/src/components/input/input.scss

@@ -216,6 +216,7 @@
 
 // Input Wrapper
 // ----------------------------------------------------------------
+
 .input-wrapper {
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
@@ -294,11 +295,12 @@
 
 .input-wrapper label {
   /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
+   * The padding on the label adds visual
+   * space between the label and the input.
+   * We use padding so that this space can still
+   * be clicked to focus the input.
    */
-  @include margin(0, 8px, 0, 0);
+  @include padding(0, 8px, 0, 0);
 
   /**
    * This causes the label to take up
@@ -341,12 +343,13 @@
 }
 
 /**
- * The margin between the label and
- * the input should be on the start
- * when the label sits at the end.
+ * The padding on the label adds visual
+ * space between the label and the input.
+ * We use padding so that this space can still
+ * be clicked to focus the input.
  */
 :host(.input-label-placement-end) label {
-  @include margin(0, 0, 0, 8px);
+  @include padding(0, 0, 0, 8px);
 }
 
 /**

core/src/components/input/input.tsx

@@ -555,7 +555,7 @@ export class Input implements ComponentInterface {
   }
 
   private renderInput() {
-    const { disabled, readonly, inputId, labelPlacement } = this;
+    const { disabled, label, readonly, inputId, labelPlacement } = this;
     const mode = getIonMode(this);
     const value = this.getValue();
 
@@ -570,7 +570,7 @@ export class Input implements ComponentInterface {
         })}
       >
         <div class="input-wrapper">
-          <label htmlFor={inputId}>{this.label}</label>
+          {label !== undefined && <label htmlFor={inputId}>{label}</label>}
           <input
             class="native-input"
             ref={(input) => (this.nativeInput = input)}

core/src/components/input/test/input.e2e.ts

@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('input: rendering', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('ios', 'Rendering is the same across platforms');
+  });
+
+  test('should not render the label element if no label was passed', async ({ page }) => {
+    await page.setContent(`<ion-input aria-label="my hidden label"></ion-label>`);
+
+    const label = page.locator('ion-input label');
+    await expect(label).toBeHidden();
+  });
+});