diff --git a/packages/switch/package.json b/packages/switch/package.json
index 735f29fff..cb7d2bb84 100644
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@@ -39,6 +39,7 @@
"@lion/field": "0.11.1"
},
"devDependencies": {
+ "@lion/helpers": "0.3.2",
"@lion/localize": "0.8.8",
"@lion/validate": "0.7.0",
"@open-wc/demoing-storybook": "^1.10.4",
diff --git a/packages/switch/stories/index.stories.mdx b/packages/switch/stories/index.stories.mdx
index 377549155..401575177 100644
--- a/packages/switch/stories/index.stories.mdx
+++ b/packages/switch/stories/index.stories.mdx
@@ -3,6 +3,7 @@ import { Validator } from '@lion/validate';
import { LionSwitch } from '../src/LionSwitch';
import '../lion-switch.js';
+import '@lion/helpers/sb-action-logger.js';
@@ -80,7 +81,9 @@ Simple example that illustrates where validation feedback will be displayed.
return [...super.validationTypes, 'info'];
}
}
- customElements.define('custom-switch', CustomSwitch);
+ if (!customElements.get('custom-switch')) {
+ customElements.define('custom-switch', CustomSwitch);
+ }
return html`
```
+
+### With checked-changed handler
+
+You can listen for a `checked-changed` event that is fired when the switch is clicked.
+
+
+ {() => {
+ const uid = Math.random()
+ .toString(36)
+ .substr(2, 10);
+ return html`
+ {
+ document.getElementById(`logger-${uid}`).log(`Current value: ${e.target.checked}`);
+ }}"
+ >
+
+
+ `;
+ }}
+
+
+```js
+import '@lion/helpers/sb-action-logger.js';
+
+const uid = Math.random()
+ .toString(36)
+ .substr(2, 10);
+```
+
+```html
+ {
+ document.getElementById(`logger-${uid}`).log(`Current value: ${e.target.checked}`);
+ }}"
+>
+
+
+```