What is haptic feedback?

Haptic feedback is a tactile response — a small vibration or tap — that a device produces to confirm an action or draw attention. On smartphones it is generated by a tiny motor (on iPhones, Apple's "Taptic Engine") that creates short, precisely-timed pulses. Unlike a long buzzing vibration, modern haptics are crisp and subtle, designed to feel like a physical click rather than an alarm.

In native iOS apps, developers use the UIFeedbackGenerator API to play different haptic patterns such as a light tap, a "success" double-tap, or an "error" triple-tap. For a long time the web platform on iOS Safari had no equivalent — navigator.vibrate() was simply ignored on iPhones. The ios-haptics library exploits a side-effect of the <input type="checkbox" switch> element (introduced in Safari 17.4): toggling that switch triggers the system haptic engine, allowing web pages to play short haptic patterns from JavaScript.

Tool description

The iOS Haptics Tester lets you trigger haptic feedback patterns directly from your browser to verify whether your device and OS version support them. It exposes the three patterns provided by the ios-haptics library — a single tap, a "confirm" (two rapid taps), and an "error" (three rapid taps) — and also includes a button that calls the standard navigator.vibrate() API as a fallback for Android and other devices.

Examples

Action Expected feel on iPhone (iOS 17.4–26.4) Expected feel on Android
Single haptic One short, crisp tap One short vibration (~200 ms)
Confirm (two rapid haptics) Two quick taps in succession Two short vibrations
Error (three rapid haptics) Three quick taps in succession Three short vibrations
Test navigator.vibrate() Nothing on most iOS versions One ~200 ms vibration

Features

  • One-tap buttons for single, confirm, and error haptic patterns
  • Automatic detection of haptic support on the current device
  • Built-in fallback test for the standard navigator.vibrate() Web API
  • Live event log with timestamps for every triggered pattern
  • Clear status banners explaining iOS version compatibility

Use cases

  • Web developers verifying that haptic feedback works on a real iPhone before integrating ios-haptics into their own site or PWA
  • QA engineers checking how the same patterns feel on different devices, OS versions, and browsers
  • Curious users who want to experience the difference between iOS-style "Taptic" feedback and the longer Android navigator.vibrate() pulse

How it works

On iOS Safari, the tool dynamically creates a hidden <input type="checkbox" switch>, toggles it, then removes it from the DOM. The act of toggling that native switch is what triggers the Taptic Engine — there is no public Web API that does this directly. The "confirm" and "error" patterns simply repeat the toggle twice or three times in rapid succession.

On devices that do not support the iOS switch trick, the library falls back to navigator.vibrate(), which is widely supported on Android browsers. The "Test navigator.vibrate()" button in this tool calls that API directly so you can compare the two mechanisms.

Options explained

  • Single haptic — Plays one short tap. Best used to confirm a small interaction such as a toggle or a successful form field.
  • Confirm (two rapid haptics) — Plays two quick taps. Ideal for "saved", "sent", or other positive confirmations.
  • Error (three rapid haptics) — Plays three quick taps. Use to signal validation errors or destructive failures.
  • Test navigator.vibrate() — Calls the Web Vibration API with a 200 ms duration. Useful for confirming non-iOS device support and for comparing the feel against the iOS patterns.
  • Clear log — Removes all entries from the event log.

Limitations

  • Programmatic iOS haptics only work on iOS 17.4 through 26.4. Apple patched the underlying behavior in iOS 26.5, so calling these patterns from JavaScript no longer triggers the Taptic Engine on the latest iOS versions. Direct user interaction with a real <input type="checkbox" switch> still works.
  • iOS Safari ignores navigator.vibrate() on virtually all versions, so the fallback button will appear silent on iPhones.
  • Desktop browsers cannot produce haptic feedback; the buttons will run but you will feel nothing.
  • Some Android browsers require the page to be in the foreground and a user gesture before navigator.vibrate() will fire.
  • Haptic feedback may also be disabled in the device's system settings (e.g. Settings → Sounds & Haptics → System Haptics on iOS).

Tips

  • Test on a real device, not a simulator or emulator — virtual devices do not have a Taptic Engine.
  • If nothing happens on iPhone, check that System Haptics are enabled in Settings and that Silent Mode is not suppressing them on older iOS versions.
  • Use the Confirm pattern sparingly; overusing rapid haptics quickly becomes annoying.
  • Combine haptics with visual feedback — a haptic alone is rarely enough to communicate state to the user.

FAQ

Why don't I feel anything on my iPhone? You are probably on iOS 26.5 or newer, where Apple patched the technique used by this library. Try a device running iOS 17.4–26.4, or check that System Haptics are enabled in Settings.

Why doesn't navigator.vibrate() work on iPhone? Apple has never implemented the Web Vibration API in iOS Safari. There is currently no standards-based way to trigger vibration on iOS from a web page.

Is this safe to use in production? The library is small and side-effect free, but because it relies on a quirk of one specific HTML element, it can break in any future iOS update — as it already did in iOS 26.5. Always treat haptic feedback as a progressive enhancement, never a requirement.

Does it work inside a PWA or "Add to Home Screen" app? Yes, on supported iOS versions the same technique works in installed web apps just as it does in Safari.