[React] CSSでiOSのUISwitchライクなSwitchを作る | DevelopersIOはじめに こんにちは。CX事業本部 Delivery部 フロントエンドチームの加藤です。 今回はCSSでiOSのUISwitchライクなReactコンポーネントを作ってみたいと思います。 開発環境 macOS Monterey 12.6 CodeSandbox（React Typescriptテンプレートを使用） 作ったコンポーネント iOSのUISwitchのようにクリックするたびにON/OFFが切り替わります。 コード Switch.tsx SwitchのReactコンポーネントです。 現在のON/OFF状態とON/OFFを切り替えた時の処理をpropsで受け取ります。 以下がポイントです。 ON/OFF状態を持たせるため、type="checkbox"のinput要素を使う input要素自体はON/OFFの状態を持つだけで、外観のカスタマイズはlabel要素を使う label要素ク
![[React] CSSでiOSのUISwitchライクなSwitchを作る | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
