feat(toggle): add iOS 18 haptic feedback

[jedlikowski]

Issue number: resolves #29942

---

What is the current behavior?

iOS 18 has haptics on toggles, making a vibration when the user taps on a toggle. However, Ionic Framework does not match the implementation.

What is the new behavior?

• Added haptics to the onClick function for iOS mode only. This works when the iOS device has haptics enabled.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 8.5.3-dev.11743549985.1c03dfea

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 2, 2025 11:49pm

[jedlikowski]

onClick listener moved to label, without this change Host was capturing clicks on the haptic <label> too, not only on .toggle-wrapper

[jedlikowski]

If I understand correctly, we don't need these elements if Vibration API is available, because then hapticSelection() will work.

[jedlikowski]

Hi @thetaPC, could you take a look? Do you have any suggestions? Or can we get this merged? Can't wait to have haptic feedback on toggles in my PWA 😄

[jedlikowski]

Hi @thetaPC, what's the status here? 😄 Can we get this merged?

[thetaPC]

Hello! I've responded to the feature request for more information.

As we work to determine the status of this request, I’ll be stepping back as a direct peer reviewer. Please know that this doesn’t reflect a lack of interest—we truly appreciate the effort behind it.

[ShaneK]

Minor grammar nit you can take or leave, but looks good to me!

[thetaPC]

@jedlikowski Thank you for the PR! Also congrats on your first PR with Ionic Framework!!

[jedlikowski]

Thanks for merging it @thetaPC 😄 I don't see most of my changes though in the final PR 😮 . I see that just hapticSelection() is triggered instead of triggering a change on a hidden <input switch type="checkbox">? Looks like this works in capacitor only, not in the context of safari browser which is the case for PWA (website added as fullscreen app to the homescreen, not PWA in the meaning of website wrapped in native shell and distributed via AppStore).

I tried going to the preview linked in the automatic Vercel comment above and the haptic feedback was not triggered for me when clicking on the toggle, while it was in the original set of changes.

[thetaPC]

@jedlikowski I used hapticSelection() to:

• keep consistency with how we handle haptics.
• lessen the potential risk of adding a hidden input and depending on the click. Would it cause accessibility issues? Could the event trigger unexpected issues? Etc.
• not cause a regression. Using the hidden input lead to toggles within an item to not click correctly when a user wants to click on the item to change the toggle's state.

You will need to test the haptics on a real physical device, especially since it needs to check if the device has haptics enabled. This follows how native iOS handles the toggle vibration.

If you believe that this solution should be altered to handle other cases, then please open a new issue with use cases.