Slide toggle is to small on a mobile device

[henrikhoglundseb]

Your slidertoggle is to small on a mobile device. Its 20px in height. The hitaria is OK :D But the component is preceved as to small when you hit it.

My suggerstion is to make it 30-32px in height just like apple has it on mobile devices.

https://developer.apple.com/design/human-interface-guidelines/ios/controls/switches/

https://designlibrary.sebgroup.com/components/slide-toggle/#guidelines

[ghost]

I vote on making it with 32 px height to match our small button size! Can I also ask about the placement on the Slide toggle?! Shoul it maybe align with top of the label text and not centered in the total grey box?

[ulde01]

Design update 2020-11-13

Change

• The default version has adjusted sizes, states and colours (please see the details in the link below)
• A new mobile-friendly larger version has been added

Details

All states

• Changed border radius to 0.625rem
• Changed height from 1.25rem to 1.5rem
• Changed switch size from 1.125rem to 1.25rem
• Changed with to 2.75rem from 2.5rem
• Added version with and without label.

Normal/Off

• Changed background color from Grey 400 to Grey 300
• Changed state name to “Off”

Hover

• Removed blue ring in switch
• Changed left margin of switch to 0.375rem

Focus

• Removed blue ring in switch
• Added border: 1px solid #007AC7; (Blue Dark 2)
• Added box-shadow: 0 0 4px 1px #41B0EE; (Blue)

Pressed/On

• Changed state name to “On”
• Changed background from Blue to Green Dark 1

Pressed & Hover

• Change state name to "On & Focused"
• Removed blue ring in switch
• Changed background from Blue to Green Dark 2
• Changed right margin of switch to 0.375rem

Contextual helpbutton

• On & Off have symbols with contextual help button for both default & large size versions.

Default Size Component has a

• Default size

Large Size

• Added a Large Size version of the component

Component identifier component-slidetoggle

Reason The slide toggle was too small for a mobile context. We also noticed that the standard version needed to be updated and specified better.

Specification https://designlibrary.sebgroup.com/components/component-slidetoggle

Progress

• [x] Vanilla: https://github.com/sebgroup/vanilla-pattern-library/issues/242
• [ ] Bootstrap: https://github.com/sebgroup/bootstrap/issues/472
• [ ] Angular: https://github.com/sebgroup/ng-components/issues/538
• [ ] React: https://github.com/sebgroup/react-components/issues/492
• [ ] AngularMaterial: https://github.com/sebgroup/seb-angular-material/issues/126