Skip to content

Commit 9d7b62b

Browse files
liamdebeasiliamdebeasi
authored
docs(checkbox): show how to prevent toggling checkbox with link (#3584)
1 parent eddeb20 commit 9d7b62b

File tree

14 files changed

+196
-0
lines changed

14 files changed

+196
-0
lines changed

‎docs/api/checkbox.md

+8
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,14 @@ import Justify from '@site/static/usage/v8/checkbox/justify/index.md';
6565
import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md';
6666

6767
<Indeterminate />
68+
69+
## Links inside of Labels
70+
71+
Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.
72+
73+
import LabelLink from '@site/static/usage/v8/checkbox/label-link/index.md';
74+
75+
<LabelLink />
6876

6977
## Theming
7078

‎static/usage/v7/checkbox/label-link/angular.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-checkbox>I agree to the <a href="#" (click)="$event.stopPropagation()">terms and conditions</a></ion-checkbox>
3+
```

‎static/usage/v7/checkbox/label-link/demo.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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>Checkbox</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-checkbox
18+
>I agree to the <a href="#" onclick="event.stopPropagation()">terms and conditions</a></ion-checkbox
19+
>
20+
</div>
21+
</ion-content>
22+
</ion-app>
23+
</body>
24+
</html>

‎static/usage/v7/checkbox/label-link/index.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v7/checkbox/label-link/demo.html"
17+
/>

‎static/usage/v7/checkbox/label-link/javascript.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-checkbox>I agree to the <a href="#" onclick="event.stopPropagation()">terms and conditions</a></ion-checkbox>
3+
```

‎static/usage/v7/checkbox/label-link/react.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```tsx
2+
import React, { useEffect, useRef } from 'react';
3+
import { IonCheckbox } from '@ionic/react';
4+
5+
function Example() {
6+
const ref = useRef<HTMLAnchorElement>(null);
7+
8+
/**
9+
* IonCheckbox will be listening for the native click event here so we need
10+
* to call stopPropagation when the native click event instead of when the
11+
* synthetic click event fires.
12+
*/
13+
useEffect(() => {
14+
ref.current?.addEventListener('click', (event) => {
15+
event.stopPropagation();
16+
});
17+
}, [ref]);
18+
19+
return (
20+
<IonCheckbox>
21+
I agree to the{' '}
22+
<a href="#" ref={ref}>
23+
terms and conditions
24+
</a>
25+
</IonCheckbox>
26+
);
27+
}
28+
export default Example;
29+
```

‎static/usage/v7/checkbox/label-link/vue.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```html
2+
<template>
3+
<ion-checkbox>I agree to the <a href="#" @click="$event.stopPropagation()">terms and conditions</a></ion-checkbox>
4+
</template>
5+
6+
<script lang="ts">
7+
import { IonCheckbox } from '@ionic/vue';
8+
import { defineComponent } from 'vue';
9+
10+
export default defineComponent({
11+
components: { IonCheckbox },
12+
});
13+
</script>
14+
```

‎static/usage/v8/checkbox/label-link/angular.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-checkbox>I agree to the <a href="#" (click)="$event.stopPropagation()">terms and conditions</a></ion-checkbox>
3+
```

‎static/usage/v8/checkbox/label-link/demo.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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>Checkbox</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@next/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-checkbox
18+
>I agree to the <a href="#" onclick="event.stopPropagation()">terms and conditions</a></ion-checkbox
19+
>
20+
</div>
21+
</ion-content>
22+
</ion-app>
23+
</body>
24+
</html>

‎static/usage/v8/checkbox/label-link/index.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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="8"
10+
code={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v8/checkbox/label-link/demo.html"
17+
/>

‎static/usage/v8/checkbox/label-link/javascript.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-checkbox>I agree to the <a href="#" onclick="event.stopPropagation()">terms and conditions</a></ion-checkbox>
3+
```

‎static/usage/v8/checkbox/label-link/react.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```tsx
2+
import React, { useEffect, useRef } from 'react';
3+
import { IonCheckbox } from '@ionic/react';
4+
5+
function Example() {
6+
const ref = useRef<HTMLAnchorElement>(null);
7+
8+
/**
9+
* IonCheckbox will be listening for the native click event here so we need
10+
* to call stopPropagation when the native click event instead of when the
11+
* synthetic click event fires.
12+
*/
13+
useEffect(() => {
14+
ref.current?.addEventListener('click', (event) => {
15+
event.stopPropagation();
16+
});
17+
}, [ref]);
18+
19+
return (
20+
<IonCheckbox>
21+
I agree to the{' '}
22+
<a href="#" ref={ref}>
23+
terms and conditions
24+
</a>
25+
</IonCheckbox>
26+
);
27+
}
28+
export default Example;
29+
```

‎static/usage/v8/checkbox/label-link/vue.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```html
2+
<template>
3+
<ion-checkbox>I agree to the <a href="#" @click="$event.stopPropagation()">terms and conditions</a></ion-checkbox>
4+
</template>
5+
6+
<script lang="ts">
7+
import { IonCheckbox } from '@ionic/vue';
8+
import { defineComponent } from 'vue';
9+
10+
export default defineComponent({
11+
components: { IonCheckbox },
12+
});
13+
</script>
14+
```

‎versioned_docs/version-v7/api/checkbox.md

+8
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,14 @@ import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md
6767

6868
<Indeterminate />
6969

70+
## Links inside of Labels
71+
72+
Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.
73+
74+
import LabelLink from '@site/static/usage/v7/checkbox/label-link/index.md';
75+
76+
<LabelLink />
77+
7078
## Theming
7179

7280
### CSS Custom Properties

0 commit comments

Comments
 (0)