The toggle switch appears to be a fixed size - adjusting the height and width of the component seems to just add more white space around it, without actually changing the size of the toggle itself. When using on an iPad, the toggle is a little smaller than ideal - it’s usable, but I can definitely foresee a client asking if I can make it a little bigger.
Is there/will there eventually be a way of increasing the size of the toggle?
It would be even better if we could specify that the system uses the “system default” toggle, with some customisation around things like colour, so that it looks as much as possible like a native iOS/android app.
Well, for starters. There is no system default toggle switch in regards to the browser. Toggle switches are either a checkbox element or a tree of divider elements configured to provide the appearance and behavior of a toggle switch. In our case it is the latter, although our initial implementation was a checkbox. We could dynamically scale the toggle switch and all it’s internal elements, but this could lead to other problems as a result of making things way more complex than they need to be.
Currently our toggle switch is modeled after native Android toggle switch design. IOS, by design is 4px larger (not including the track). See https://codesandbox.io/s/1yzy7q474l as an example. We’d prefer to keep things simple, but you do bring up some valid thoughts. It’s possible that we can add a boolean property labeled useNative or something that when checked uses native styling after detecting the device. This adds a bit more complexity. I’ll have to bring this up internally and get back to you.