diff --git a/.changeset/famous-wolves-notice.md b/.changeset/famous-wolves-notice.md
new file mode 100644
index 000000000..316e201a2
--- /dev/null
+++ b/.changeset/famous-wolves-notice.md
@@ -0,0 +1,5 @@
+---
+'@lion/switch': patch
+---
+
+**switch**: clicking label focuses button
diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js
index fda6552cc..574b96f6d 100644
--- a/packages/switch/src/LionSwitch.js
+++ b/packages/switch/src/LionSwitch.js
@@ -130,4 +130,15 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
_syncButtonSwitch() {
this._inputNode.disabled = this.disabled;
}
+
+ /**
+ * @configure FormControlMixin
+ * @protected
+ */
+ _onLabelClick() {
+ if (this.disabled) {
+ return;
+ }
+ this._inputNode.focus();
+ }
}
diff --git a/packages/switch/test/lion-switch.test.js b/packages/switch/test/lion-switch.test.js
index d0368e2c5..60c828cad 100644
--- a/packages/switch/test/lion-switch.test.js
+++ b/packages/switch/test/lion-switch.test.js
@@ -39,6 +39,18 @@ describe('lion-switch', () => {
expect(el.checked).to.be.false;
});
+ it('clicking the label should focus the toggle button', async () => {
+ const el = await fixture(html``);
+ el._labelNode.click();
+ expect(document.activeElement).to.equal(el._inputNode);
+ });
+
+ it('clicking the label should not focus the toggle button when disabled', async () => {
+ const el = await fixture(html``);
+ el._labelNode.click();
+ expect(document.activeElement).to.not.equal(el._inputNode);
+ });
+
it('should sync its "disabled" state to child button', async () => {
const el = await fixture(html``);
const { inputNode } = getProtectedMembers(el);