Skip to content

Commit 436bc2e

Browse files
liamdebeasiliamdebeasi
authored
docs(select): add label slot and aria label playgrounds (#2971)
1 parent 944abce commit 436bc2e

File tree

13 files changed

+249
-9
lines changed

13 files changed

+249
-9
lines changed

‎docs/api/select.md

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,38 @@ A select should be used with child `<ion-select-option>` elements. If the child
2424

2525
If `value` is set on the `<ion-select>`, the selected option will be chosen based on that value.
2626

27+
## Labels
28+
29+
Select has several options for supplying a label for the component:
30+
31+
- `label` property: used for plaintext labels
32+
- `label` slot: used for custom HTML labels
33+
- `aria-label`: used for selects with no visible label
34+
35+
### Label Placement
36+
37+
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. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot.
38+
39+
import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
40+
41+
<LabelPlacement />
42+
43+
### Label Slot
44+
45+
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.
46+
47+
import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md';
48+
49+
<LabelSlot />
50+
51+
### No Visible Label
52+
53+
If no visible label is needed, devs should still supply an `aria-label` so the select is accessible to screen readers.
54+
55+
import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md';
56+
57+
<NoVisibleLabel />
58+
2759
## Single Selection
2860

2961
By default, the select allows the user to select only one option. The alert interface presents users with a radio button styled list of options. The select component's value receives the value of the selected option's value.
@@ -83,15 +115,6 @@ import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-val
83115
import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.md';
84116

85117
<ObjectValuesAndMultipleSelectionExample />
86-
87-
88-
## Label Placement
89-
90-
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.
91-
92-
import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';
93-
94-
<LabelPlacement />
95118

96119
## Justification
97120

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-select placeholder="Select a Fruit">
5+
<div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
6+
<ion-select-option value="apple">Apple</ion-select-option>
7+
<ion-select-option value="banana">Banana</ion-select-option>
8+
<ion-select-option value="orange">Orange</ion-select-option>
9+
</ion-select>
10+
</ion-item>
11+
</ion-list>
12+
```

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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>select</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-select placeholder="Select a Fruit">
20+
<div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
21+
<ion-select-option value="apple">Apple</ion-select-option>
22+
<ion-select-option value="banana">Banana</ion-select-option>
23+
<ion-select-option value="orange">Orange</ion-select-option>
24+
</ion-select>
25+
</ion-item>
26+
</ion-list>
27+
</div>
28+
</ion-content>
29+
</ion-app>
30+
</body>
31+
</html>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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/select/label-slot/demo.html"
12+
size="300px"
13+
/>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-select placeholder="Select a Fruit">
5+
<div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
6+
<ion-select-option value="apple">Apple</ion-select-option>
7+
<ion-select-option value="banana">Banana</ion-select-option>
8+
<ion-select-option value="orange">Orange</ion-select-option>
9+
</ion-select>
10+
</ion-item>
11+
</ion-list>
12+
```

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<IonList>
8+
<IonItem>
9+
<IonSelect placeholder="Select a Fruit">
10+
<div slot="label">Favorite Fruit <IonText color="danger">(Required)</IonText></div>
11+
<IonSelectOption value="apple">Apple</IonSelectOption>
12+
<IonSelectOption value="banana">Banana</IonSelectOption>
13+
<IonSelectOption value="orange">Orange</IonSelectOption>
14+
</IonSelect>
15+
</IonItem>
16+
</IonList>
17+
);
18+
}
19+
export default Example;
20+
```

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-item>
5+
<ion-select placeholder="Select a Fruit">
6+
<div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
7+
<ion-select-option value="apple">Apple</ion-select-option>
8+
<ion-select-option value="banana">Banana</ion-select-option>
9+
<ion-select-option value="orange">Orange</ion-select-option>
10+
</ion-select>
11+
</ion-item>
12+
</ion-list>
13+
</template>
14+
15+
<script lang="ts">
16+
import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/vue';
17+
import { defineComponent } from 'vue';
18+
19+
export default defineComponent({
20+
components: { IonItem, IonList, IonSelect, IonSelectOption, IonText },
21+
});
22+
</script>
23+
```

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-select aria-label="Favorite Fruit" value="apple">
5+
<ion-select-option value="apple">Apple</ion-select-option>
6+
<ion-select-option value="banana">Banana</ion-select-option>
7+
<ion-select-option value="orange">Orange</ion-select-option>
8+
</ion-select>
9+
</ion-item>
10+
</ion-list>
11+
```

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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>select</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-select aria-label="Favorite Fruit" value="apple">
20+
<ion-select-option value="apple">Apple</ion-select-option>
21+
<ion-select-option value="banana">Banana</ion-select-option>
22+
<ion-select-option value="orange">Orange</ion-select-option>
23+
</ion-select>
24+
</ion-item>
25+
</ion-list>
26+
</div>
27+
</ion-content>
28+
</ion-app>
29+
</body>
30+
</html>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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/select/no-visible-label/demo.html"
12+
size="300px"
13+
/>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-select aria-label="Favorite Fruit" value="apple">
5+
<ion-select-option value="apple">Apple</ion-select-option>
6+
<ion-select-option value="banana">Banana</ion-select-option>
7+
<ion-select-option value="orange">Orange</ion-select-option>
8+
</ion-select>
9+
</ion-item>
10+
</ion-list>
11+
```

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<IonList>
8+
<IonItem>
9+
<IonSelect aria-label="Favorite Fruit" value="apple">
10+
<IonSelectOption value="apple">Apple</IonSelectOption>
11+
<IonSelectOption value="banana">Banana</IonSelectOption>
12+
<IonSelectOption value="orange">Orange</IonSelectOption>
13+
</IonSelect>
14+
</IonItem>
15+
</IonList>
16+
);
17+
}
18+
export default Example;
19+
```

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-item>
5+
<ion-select aria-label="Favorite Fruit" value="apple">
6+
<ion-select-option value="apple">Apple</ion-select-option>
7+
<ion-select-option value="banana">Banana</ion-select-option>
8+
<ion-select-option value="orange">Orange</ion-select-option>
9+
</ion-select>
10+
</ion-item>
11+
</ion-list>
12+
</template>
13+
14+
<script lang="ts">
15+
import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/vue';
16+
import { defineComponent } from 'vue';
17+
18+
export default defineComponent({
19+
components: { IonItem, IonList, IonSelect, IonSelectOption, IonText },
20+
});
21+
</script>
22+
```

0 commit comments

Comments
 (0)