[Video](https://www.youtube.com/watch?v=_KqccADghcA)

In today's GUI challenge I share my thinking on a way to solve a switch. A tiny, UX packed component that ended up being one of the most involved challenges so far. Tons of great layouts, accessibility, animations and interactions to share, which means tons of places for you to have a style preference 😉

Chapters:

- 0:00 - Introduction
- 1:15 - States
- 2:05 - Interactions
- 2:45 - Screen reader
- 3:14 - Touch
- 4:10 - Hover
- 5:07 - RTL
- 5:56 - CSS/JS not required
- 7:00 - Vertical variant
- 9:14 - Flexbox
- 10:39 - Grid
- 12:10 - Overrides
- 15:38 - Javascript
- 18:15 - Outro

Resources:

- Read along → <https://goo.gle/3xBYGHy>
- Try a demo → <https://goo.gle/2VJLVO0>
- Get the source → <https://goo.gle/3n4Sfcg>

Watch more GUI Challenges → <https://goo.gle/GUIchallenges>

Subscribe to Google Chrome Developers → <http://goo.gl/LLLNvf>

[Back to all episodes](https://web.dev/shows/)