input[type="checkbox"]要素のswitch属性を使用したスイッチUIの実装例 – TAKLOGinput[type="checkbox"]要素のswitch属性を使用したスイッチの実装メモです。まだ実務で使用したわけではないのであくまで自由研究としてですが、将来的にスイッチUIはinput[type="checkbox"]要素にswitch属性を指定して実装するケースが増えそうなので実装例としてまとめておきます。 switch属性とは現在のHTMLの仕様を提供しているWHATWGより提案された、スイッチUIを実装するためのinput[type="checkbox"]要素に新たに追加された属性です。switch属性を指定することでWeb標準でスイッチUIを作成することが可能となります。
![input[type="checkbox"]要素のswitch属性を使用したスイッチUIの実装例 – TAKLOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/b9803481cdfb37d4a77bd2f57357d0fa08474f72/height=288;version=1;width=512/https%3A%2F%2Fwww.tak-dcxi.com%2Fog%2Fexample-of-implementation-of-switch-using-switch-attribute.png)
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案![input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f498fff7f14d1f4ab6c565817f30f1ad084c770/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Finput%255Btype%253Dcheckbox%255D%2520%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%25AB%2520switch%2520%25E5%25B1%259E%25E6%2580%25A7%25E3%2582%2592%25E6%258C%2587%25E5%25AE%259A%25E3%2581%2599%25E3%2582%258B%25E3%2581%2593%25E3%2581%25A8%25E3%2581%25AB%25E3%2582%2588%25E3%2582%258B%2520HTML%2520%25E6%25A8%2599%25E6%25BA%2596%25E3%2581%25AE%25E3%2582%25B9%25E3%2582%25A4%25E3%2583%2583%25E3%2583%2581%2520UI%2520%25E3%2581%25AE%25E6%258F%2590%25E6%25A1%2588%2FHTML.png)
