twbs
Docs: Add a note about using the `switch` attribute on Switches
Prerequisites
- [x] I have searched for duplicate or closed feature requests
- [x] I have read the contributing guidelines
Proposal
I recently did some deep-dive research into using Safari's native switch input (which has been available some 17.4) with Bootstrap CSS.
I discovered that simply adding the switch attribute to the existing Bootstrap switch input will mean that using the input on an iPhone with iOS 17.4 or later will give a satisfying haptic feedback (just like the OS level switches do). The styling remains identical so I see this a minor progressive enhancement and personally I'll add this attribute to my Bootstrap switches moving forward.
Codepen Example (test on an iPhone): https://stackblitz.com/edit/bootstrap-switch-native?file=index.html
I was thinking it could be good to add a small mention about this as a note in the docs? Not necessarily in the example code by default but just a suggestion.
Related sidenote: For anyone interested, you can use native input switches on Safari with default appearance too for a more iOS/macOS like switch but retaining Bootstrap accent color and height. Using native switch appearance (with -webkit-appearance: auto;) has advantage of working with system accessibility settings like 'Differentiate without color' and 'Prefers Higher Contrast'. Blog Post / CodePen Demo.
Motivation and context
This is a minor progressive enhancement and personally I'll add this attribute to my Bootstrap switches moving forward and think other users would be interested in doing so. There are no downsides to using it.
@coliff
I am sharing the link to my PR, please let me know your thoughts, if we need any improvements.. Thank you
https://github.com/twbs/bootstrap/pull/41231