View examples: https://nathanauckett.github.io/nsw-design-system-switch-component/
These are switches made to fit into the NSW Design System.
These switches are just check boxes styled to look like switches.
They help represent an on/off state in a nicer, more modern fashion and are most useful for settings in web-apps.
I found that NSW Design System didn't seem to be missing much as far as core accessible components are concerned. It already contains most of the core components I could think of to build an effective modern website.
Some more advanced components seen in frameworks like MUI, while useful, are not always accessible to people with disability.
I see switches as a missed opportunity as they can be used and interpreted by people with and without impairments, hinging on the built in HTML accessibility of a standard check box and adding extra visual indicators through the styling; where you can see the location, colour and motion of the switch change.
I created the switches using SCSS, building off the existing NSW Design System Sass styling and integrating most of the same style variations to keep the look consistent between UI elements such as buttons. I used the buttons as my main source of styling, borrowing the same colours from the existing scss and using the pre-defined NSW Design colours.
Requirements:
- NSW Design System - https://digitalnsw.github.io/nsw-design-system/
- SCSS/SASS - https://sass-lang.com/