Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Docs: Add a note about using the switch attribute on Switches #41223

Open
2 tasks done
coliff opened this issue Feb 12, 2025 · 2 comments · May be fixed by #41231
Open
2 tasks done

Docs: Add a note about using the switch attribute on Switches #41223

coliff opened this issue Feb 12, 2025 · 2 comments · May be fixed by #41231

Comments

@coliff
Copy link
Contributor

coliff commented Feb 12, 2025

Prerequisites

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 coliff added the feature label Feb 12, 2025
@anish-anantharaman
Copy link

@coliff
May I take up this feature ?..

@anish-anantharaman
Copy link

@coliff

I am sharing the link to my PR, please let me know your thoughts, if we need any improvements..
Thank you

#41231

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
Status: Needs review
Development

Successfully merging a pull request may close this issue.

3 participants