diff --git a/core/src/components/checkbox/test/checkbox.spec.ts b/core/src/components/checkbox/test/checkbox.spec.ts
index e27f0e2a50..31317922fe 100644
--- a/core/src/components/checkbox/test/checkbox.spec.ts
+++ b/core/src/components/checkbox/test/checkbox.spec.ts
@@ -54,3 +54,4 @@ describe('ion-checkbox: indeterminate', () => {
expect(checkbox.getAttribute('aria-checked')).toBe('mixed');
});
});
+
diff --git a/core/src/components/toggle/test/toggle.spec.ts b/core/src/components/toggle/test/toggle.spec.ts
index ec5c4f2965..b521c83a12 100644
--- a/core/src/components/toggle/test/toggle.spec.ts
+++ b/core/src/components/toggle/test/toggle.spec.ts
@@ -2,6 +2,7 @@ import { newSpecPage } from '@stencil/core/testing';
import { config } from '../../../global/config';
import { Toggle } from '../toggle';
+import { toggle } from 'ionicons/icons';
describe('toggle', () => {
beforeEach(() => {
@@ -75,3 +76,33 @@ describe('ion-toggle: disabled', () => {
expect(toggle.checked).toBe(false);
});
});
+
+describe('ion-toggle: required', () => {
+ it('should have a required attribute in inner input when true', async () => {
+ const page = await newSpecPage({
+ components: [Toggle],
+ html: `
+ Toggle
+ `,
+ });
+
+ const toggle = page.body.querySelector('ion-toggle')!;
+ const nativeInput = toggle.shadowRoot?.querySelector("input[role=switch]")!;
+
+ expect(nativeInput.hasAttribute('required')).toBeTruthy();
+ });
+
+ it('should not have a required attribute in inner input when false', async () => {
+ const page = await newSpecPage({
+ components: [Toggle],
+ html: `
+ Toggle
+ `,
+ });
+
+ const toggle = page.body.querySelector('ion-toggle')!;
+ const nativeInput = toggle.shadowRoot?.querySelector("input[role=switch]")!;
+
+ expect(nativeInput.hasAttribute('required')).toBeFalsy();
+ });
+});