docs(input): add label slot and no visible label demos

docs/api/input.md

@@ -36,15 +36,41 @@ import Types from '@site/static/usage/v7/input/types/index.md';
 
 <Types />
 
+## Labels
 
-## Label Placement
+Labels should be used to describe the input. They can be used visually, and they will also be read out by screen readers when the user is focused on the input. This makes it easy for the user to understand the intent of the input. Input has several ways to assign a label:
+
+- `label` property: used for plaintext labels
+- `label` slot: used for custom HTML labels (experimental)
+- `aria-label`: used to provide a label for screen readers but adds no visible label
+
+### Label Placement
 
 Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
 
 import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md';
 
 <LabelPlacement />
 
+### Label Slot (experimental)
+
+While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.
+
+Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
+
+import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md';
+
+<LabelSlot />
+
+### No Visible Label
+
+If no visible label is needed, developers should still supply an `aria-label` so the input is accessible to screen readers.
+
+import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.md';
+
+<NoVisibleLabel />
+
+
 
 ## Clear Options
 

docs/api/range.md

@@ -24,10 +24,11 @@ By default the Range slider has a minimum value of `0` and a maximum value of `1
 
 ## Labels
 
-Range has several options for supplying a label for the component:
+Labels should be used to describe the range. They can be used visually, and they will also be read out by screen readers when the user is focused on the range. This makes it easy for the user to understand the intent of the range. Range has several ways to assign a label:
+
 - `label` property: used for plaintext labels
 - `label` slot: used for custom HTML labels
-- `aria-label`: used for ranges with no visible label
+- `aria-label`: used to provide a label for screen readers but adds no visible label
 
 ### Label Placement
 
@@ -47,7 +48,7 @@ import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md
 
 ### No Visible Label
 
-If no visible label is needed, devs should still supply an `aria-label` so the range is accessible to screen readers.
+If no visible label is needed, developers should still supply an `aria-label` so the range is accessible to screen readers.
 
 import NoVisibleLabel from '@site/static/usage/v7/range/no-visible-label/index.md';
 

docs/api/select.md

@@ -26,11 +26,13 @@ If `value` is set on the `<ion-select>`, the selected option will be chosen base
 
 ## Labels
 
+Labels should be used to describe the select. They can be used visually, and they will also be read out by screen readers when the user is focused on the select. This makes it easy for the user to understand the intent of the select. Select has several ways to assign a label:
+
 Select has several options for supplying a label for the component:
 
 - `label` property: used for plaintext labels
 - `label` slot: used for custom HTML labels
-- `aria-label`: used for selects with no visible label
+- `aria-label`: used to provide a label for screen readers but adds no visible label
 
 ### Label Placement
 
@@ -50,7 +52,7 @@ import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md';
 
 ### No Visible Label
 
-If no visible label is needed, devs should still supply an `aria-label` so the select is accessible to screen readers.
+If no visible label is needed, developers should still supply an `aria-label` so the select is accessible to screen readers.
 
 import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md';
 

static/usage/v7/input/label-slot/angular.md

@@ -0,0 +1,9 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input labelPlacement="floating" value="[email protected]">
+      <div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
+    </ion-input>
+  </ion-item>
+</ion-list>
+```

static/usage/v7/input/label-slot/demo.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>input</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input label-placement="floating" value="[email protected]">
+                <div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
+              </ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

static/usage/v7/input/label-slot/index.md

@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/input/label-slot/demo.html"
+/>

static/usage/v7/input/label-slot/javascript.md

@@ -0,0 +1,9 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input label-placement="floating" value="[email protected]">
+      <div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
+    </ion-input>
+  </ion-item>
+</ion-list>
+```

static/usage/v7/input/label-slot/react.md

@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList, IonText } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonInput labelPlacement="floating" value="[email protected]">
+          <div slot="label">Email <IonText color="danger">(Required)</IonText></div>
+        </IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```

static/usage/v7/input/label-slot/vue.md

@@ -0,0 +1,20 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-input label-placement="floating" value="[email protected]">
+        <div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
+      </ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonList, IonText } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonList, IonText },
+  });
+</script>
+```

static/usage/v7/input/no-visible-label/angular.md

@@ -0,0 +1,7 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input aria-label="Email" value="[email protected]"></ion-input>
+  </ion-item>
+</ion-list>
+```

static/usage/v7/input/no-visible-label/demo.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>input</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input aria-label="Email" value="[email protected]"></ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

static/usage/v7/input/no-visible-label/index.md

@@ -0,0 +1,12 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v7/input/no-visible-label/demo.html"
+/>

static/usage/v7/input/no-visible-label/javascript.md

@@ -0,0 +1,7 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input aria-label="Email" value="[email protected]"></ion-input>
+  </ion-item>
+</ion-list>
+```

static/usage/v7/input/no-visible-label/react.md

@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonInput aria-label="Email" value="[email protected]"></IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```

static/usage/v7/input/no-visible-label/vue.md

@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-input aria-label="Email" value="[email protected]"></ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonInput, IonItem, IonList } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonInput, IonItem, IonList },
+  });
+</script>
+```