Skip to content

Commit 7540f82

Browse files
liamdebeasiliamdebeasi
authored
docs(input): add label slot and no visible label demos (#2997)
1 parent 0095c9f commit 7540f82

File tree

15 files changed

+215
-6
lines changed

15 files changed

+215
-6
lines changed

‎docs/api/input.md

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,41 @@ import Types from '@site/static/usage/v7/input/types/index.md';
3636

3737
<Types />
3838

39+
## Labels
3940

40-
## Label Placement
41+
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:
42+
43+
- `label` property: used for plaintext labels
44+
- `label` slot: used for custom HTML labels (experimental)
45+
- `aria-label`: used to provide a label for screen readers but adds no visible label
46+
47+
### Label Placement
4148

4249
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.
4350

4451
import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md';
4552

4653
<LabelPlacement />
4754

55+
### Label Slot (experimental)
56+
57+
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.
58+
59+
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.
60+
61+
import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md';
62+
63+
<LabelSlot />
64+
65+
### No Visible Label
66+
67+
If no visible label is needed, developers should still supply an `aria-label` so the input is accessible to screen readers.
68+
69+
import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.md';
70+
71+
<NoVisibleLabel />
72+
73+
4874

4975
## Clear Options
5076

‎docs/api/range.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,11 @@ By default the Range slider has a minimum value of `0` and a maximum value of `1
2424

2525
## Labels
2626

27-
Range has several options for supplying a label for the component:
27+
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:
28+
2829
- `label` property: used for plaintext labels
2930
- `label` slot: used for custom HTML labels
30-
- `aria-label`: used for ranges with no visible label
31+
- `aria-label`: used to provide a label for screen readers but adds no visible label
3132

3233
### Label Placement
3334

@@ -47,7 +48,7 @@ import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md
4748

4849
### No Visible Label
4950

50-
If no visible label is needed, devs should still supply an `aria-label` so the range is accessible to screen readers.
51+
If no visible label is needed, developers should still supply an `aria-label` so the range is accessible to screen readers.
5152

5253
import NoVisibleLabel from '@site/static/usage/v7/range/no-visible-label/index.md';
5354

‎docs/api/select.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,13 @@ If `value` is set on the `<ion-select>`, the selected option will be chosen base
2626

2727
## Labels
2828

29+
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:
30+
2931
Select has several options for supplying a label for the component:
3032

3133
- `label` property: used for plaintext labels
3234
- `label` slot: used for custom HTML labels
33-
- `aria-label`: used for selects with no visible label
35+
- `aria-label`: used to provide a label for screen readers but adds no visible label
3436

3537
### Label Placement
3638

@@ -50,7 +52,7 @@ import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md';
5052

5153
### No Visible Label
5254

53-
If no visible label is needed, devs should still supply an `aria-label` so the select is accessible to screen readers.
55+
If no visible label is needed, developers should still supply an `aria-label` so the select is accessible to screen readers.
5456

5557
import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md';
5658

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input labelPlacement="floating" value="[email protected]">
5+
<div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
6+
</ion-input>
7+
</ion-item>
8+
</ion-list>
9+
```

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>input</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-list>
18+
<ion-item>
19+
<ion-input label-placement="floating" value="[email protected]">
20+
<div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
21+
</ion-input>
22+
</ion-item>
23+
</ion-list>
24+
</div>
25+
</ion-content>
26+
</ion-app>
27+
</body>
28+
</html>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground
9+
version="7"
10+
code={{ javascript, react, vue, angular }}
11+
src="usage/v7/input/label-slot/demo.html"
12+
/>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input label-placement="floating" value="[email protected]">
5+
<div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
6+
</ion-input>
7+
</ion-item>
8+
</ion-list>
9+
```

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonInput, IonItem, IonList, IonText } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<IonList>
8+
<IonItem>
9+
<IonInput labelPlacement="floating" value="[email protected]">
10+
<div slot="label">Email <IonText color="danger">(Required)</IonText></div>
11+
</IonInput>
12+
</IonItem>
13+
</IonList>
14+
);
15+
}
16+
export default Example;
17+
```

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-item>
5+
<ion-input label-placement="floating" value="[email protected]">
6+
<div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
7+
</ion-input>
8+
</ion-item>
9+
</ion-list>
10+
</template>
11+
12+
<script lang="ts">
13+
import { IonInput, IonItem, IonList, IonText } from '@ionic/vue';
14+
import { defineComponent } from 'vue';
15+
16+
export default defineComponent({
17+
components: { IonInput, IonItem, IonList, IonText },
18+
});
19+
</script>
20+
```

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input aria-label="Email" value="[email protected]"></ion-input>
5+
</ion-item>
6+
</ion-list>
7+
```

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>input</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-list>
18+
<ion-item>
19+
<ion-input aria-label="Email" value="[email protected]"></ion-input>
20+
</ion-item>
21+
</ion-list>
22+
</div>
23+
</ion-content>
24+
</ion-app>
25+
</body>
26+
</html>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground
9+
version="7"
10+
code={{ javascript, react, vue, angular }}
11+
src="usage/v7/input/no-visible-label/demo.html"
12+
/>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input aria-label="Email" value="[email protected]"></ion-input>
5+
</ion-item>
6+
</ion-list>
7+
```

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonInput, IonItem, IonList } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<IonList>
8+
<IonItem>
9+
<IonInput aria-label="Email" value="[email protected]"></IonInput>
10+
</IonItem>
11+
</IonList>
12+
);
13+
}
14+
export default Example;
15+
```

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-item>
5+
<ion-input aria-label="Email" value="[email protected]"></ion-input>
6+
</ion-item>
7+
</ion-list>
8+
</template>
9+
10+
<script lang="ts">
11+
import { IonInput, IonItem, IonList } from '@ionic/vue';
12+
import { defineComponent } from 'vue';
13+
14+
export default defineComponent({
15+
components: { IonInput, IonItem, IonList },
16+
});
17+
</script>
18+
```

0 commit comments

Comments
 (0)