diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md index bcb053e5495..f7d46ebbb62 100644 --- a/docs/api/checkbox.md +++ b/docs/api/checkbox.md @@ -65,6 +65,14 @@ import Justify from '@site/static/usage/v8/checkbox/justify/index.md'; import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md'; + +## Links inside of Labels + +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. + +import LabelLink from '@site/static/usage/v8/checkbox/label-link/index.md'; + + ## Theming diff --git a/static/usage/v7/checkbox/label-link/angular.md b/static/usage/v7/checkbox/label-link/angular.md new file mode 100644 index 00000000000..34ec3baab77 --- /dev/null +++ b/static/usage/v7/checkbox/label-link/angular.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v7/checkbox/label-link/demo.html b/static/usage/v7/checkbox/label-link/demo.html new file mode 100644 index 00000000000..6dcb04f5d00 --- /dev/null +++ b/static/usage/v7/checkbox/label-link/demo.html @@ -0,0 +1,24 @@ + + + + + + Checkbox + + + + + + + + + +
+ I agree to the terms and conditions +
+ + + + diff --git a/static/usage/v7/checkbox/label-link/index.md b/static/usage/v7/checkbox/label-link/index.md new file mode 100644 index 00000000000..1e34eef6990 --- /dev/null +++ b/static/usage/v7/checkbox/label-link/index.md @@ -0,0 +1,17 @@ +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'; + + diff --git a/static/usage/v7/checkbox/label-link/javascript.md b/static/usage/v7/checkbox/label-link/javascript.md new file mode 100644 index 00000000000..0ba60cf12fc --- /dev/null +++ b/static/usage/v7/checkbox/label-link/javascript.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v7/checkbox/label-link/react.md b/static/usage/v7/checkbox/label-link/react.md new file mode 100644 index 00000000000..fa10eeb3ce8 --- /dev/null +++ b/static/usage/v7/checkbox/label-link/react.md @@ -0,0 +1,29 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + const ref = useRef(null); + + /** + * IonCheckbox will be listening for the native click event here so we need + * to call stopPropagation when the native click event instead of when the + * synthetic click event fires. + */ + useEffect(() => { + ref.current?.addEventListener('click', (event) => { + event.stopPropagation(); + }); + }, [ref]); + + return ( + + I agree to the{' '} + + terms and conditions + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/checkbox/label-link/vue.md b/static/usage/v7/checkbox/label-link/vue.md new file mode 100644 index 00000000000..7c4c44d77b5 --- /dev/null +++ b/static/usage/v7/checkbox/label-link/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/checkbox/label-link/angular.md b/static/usage/v8/checkbox/label-link/angular.md new file mode 100644 index 00000000000..34ec3baab77 --- /dev/null +++ b/static/usage/v8/checkbox/label-link/angular.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v8/checkbox/label-link/demo.html b/static/usage/v8/checkbox/label-link/demo.html new file mode 100644 index 00000000000..79dcce96004 --- /dev/null +++ b/static/usage/v8/checkbox/label-link/demo.html @@ -0,0 +1,24 @@ + + + + + + Checkbox + + + + + + + + + +
+ I agree to the terms and conditions +
+ + + + diff --git a/static/usage/v8/checkbox/label-link/index.md b/static/usage/v8/checkbox/label-link/index.md new file mode 100644 index 00000000000..c368f3c3747 --- /dev/null +++ b/static/usage/v8/checkbox/label-link/index.md @@ -0,0 +1,17 @@ +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'; + + diff --git a/static/usage/v8/checkbox/label-link/javascript.md b/static/usage/v8/checkbox/label-link/javascript.md new file mode 100644 index 00000000000..0ba60cf12fc --- /dev/null +++ b/static/usage/v8/checkbox/label-link/javascript.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v8/checkbox/label-link/react.md b/static/usage/v8/checkbox/label-link/react.md new file mode 100644 index 00000000000..fa10eeb3ce8 --- /dev/null +++ b/static/usage/v8/checkbox/label-link/react.md @@ -0,0 +1,29 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + const ref = useRef(null); + + /** + * IonCheckbox will be listening for the native click event here so we need + * to call stopPropagation when the native click event instead of when the + * synthetic click event fires. + */ + useEffect(() => { + ref.current?.addEventListener('click', (event) => { + event.stopPropagation(); + }); + }, [ref]); + + return ( + + I agree to the{' '} + + terms and conditions + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/checkbox/label-link/vue.md b/static/usage/v8/checkbox/label-link/vue.md new file mode 100644 index 00000000000..7c4c44d77b5 --- /dev/null +++ b/static/usage/v8/checkbox/label-link/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/versioned_docs/version-v7/api/checkbox.md b/versioned_docs/version-v7/api/checkbox.md index dd268c6dc7e..a68533490c8 100644 --- a/versioned_docs/version-v7/api/checkbox.md +++ b/versioned_docs/version-v7/api/checkbox.md @@ -67,6 +67,14 @@ import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md +## Links inside of Labels + +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. + +import LabelLink from '@site/static/usage/v7/checkbox/label-link/index.md'; + + + ## Theming ### CSS Custom Properties