diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index b20ef320f05..f62be8dc4ac 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
import { renderHiddenInput, inheritAriaAttributes } from '@utils/helpers';
import type { Attributes } from '@utils/helpers';
-import { hapticSelection } from '@utils/native/haptic';
+import { hapticAvailable, hapticSelection } from '@utils/native/haptic';
import { isRTL } from '@utils/rtl';
import { createColorClasses, hostContext } from '@utils/theme';
import { checkmarkOutline, removeOutline, ellipseOutline } from 'ionicons/icons';
@@ -34,6 +34,7 @@ export class Toggle implements ComponentInterface {
private inputId = `ion-tg-${toggleIds++}`;
private gesture?: Gesture;
private focusEl?: HTMLElement;
+ private hapticEl?: HTMLElement;
private lastDrag = 0;
private inheritedAttributes: Attributes = {};
private toggleTrack?: HTMLElement;
@@ -138,6 +139,10 @@ export class Toggle implements ComponentInterface {
const isNowChecked = !checked;
this.checked = isNowChecked;
+ if (this.hapticEl) {
+ this.hapticEl.click();
+ }
+
this.ionChange.emit({
checked: isNowChecked,
value,
@@ -285,6 +290,33 @@ export class Toggle implements ComponentInterface {
);
}
+ /**
+ * On Safari (iOS 18+) we can trigger haptic feedback programatically
+ * by rendering element
+ * with an associated