Loading Component...

Loading

More Components

View All
Oops! Something went wrong while submitting the form.
Checkbox Toggle w/ Icon
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7dd","type":"Block","tag":"div","classes":[],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7de","bee391fc-cfd4-39b0-cad5-7c8f7987b228"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7de","type":"FormCheckboxWrapper","tag":"div","classes":["fb1a19fb-d47f-1bd0-272d-8f366430125c"],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7df","35ce9331-d8e8-61ca-a4b0-287f9e29c7e0","35ce9331-d8e8-61ca-a4b0-287f9e29c7e4","35ce9331-d8e8-61ca-a4b0-287f9e29c7e5"],"data":{"form":{"type":"checkbox"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7df","type":"FormCheckboxInput","tag":"input","classes":["fb1a19fb-d47f-1bd0-272d-8f3664301264"],"children":[],"data":{"attr":{"id":"Checkbox-3","type":"checkbox","name":"Checkbox-3","data-name":"Checkbox 3","required":false,"checked":false},"form":{"type":"checkbox-input","name":"Checkbox 3"},"inputType":"default","displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e0","type":"FormInlineLabel","tag":"label","classes":["fb1a19fb-d47f-1bd0-272d-8f366430125e"],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7e1","35ce9331-d8e8-61ca-a4b0-287f9e29c7e2"],"data":{"form":{"type":"checkbox-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e1","text":true,"v":"Toggle"},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e2","type":"Span","tag":"span","classes":["fb1a19fb-d47f-1bd0-272d-8f3664301261"],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7e3"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e3","text":true,"v":" with Icon"},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e4","type":"Block","tag":"div","classes":["fb1a19fb-d47f-1bd0-272d-8f3664301263","fb1a19fb-d47f-1bd0-272d-8f366430126c"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e5","type":"Block","tag":"div","classes":["fb1a19fb-d47f-1bd0-272d-8f366430125d"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"bee391fc-cfd4-39b0-cad5-7c8f7987b228","type":"HtmlEmbed","tag":"div","classes":["16a8e866-6793-e34b-af1d-bf9bcb63243c"],"children":[],"v":"Custom CSS\n<style> \n.ms-toggle-checkbox:checked ~.ms-toggle-bg {\n\tbackground-color: #2962ff;\n}\n.ms-toggle-checkbox:checked ~.ms-toggle-dot {\n\tleft: 19px;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"meta":{"html":"Custom CSS\n<style> \n.ms-toggle-checkbox:checked ~.ms-toggle-bg {\n\tbackground-color: #2962ff;\n}\n.ms-toggle-checkbox:checked ~.ms-toggle-dot {\n\tleft: 19px;\n}\n</style>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}}],"styles":[{"_id":"fb1a19fb-d47f-1bd0-272d-8f366430125c","fake":false,"type":"class","name":"MS Toggle Wrap","namespace":"","comb":"","styleLess":"position: relative; width: 50px; height: 34px; margin-bottom: 15px;","variants":{},"children":["fb1a19fb-d47f-1bd0-272d-8f3664301268","fb1a19fb-d47f-1bd0-272d-8f3664301269"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f3664301264","fake":false,"type":"class","name":"MS Toggle Checkbox","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f366430125e","fake":false,"type":"class","name":"MS Toggle Label","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: auto; bottom: 0%; z-index: 2; display: flex; padding-left: 65px; justify-content: flex-start; align-items: center; font-weight: 700; white-space: nowrap;","variants":{},"children":["fb1a19fb-d47f-1bd0-272d-8f366430126b","fb1a19fb-d47f-1bd0-272d-8f366430126f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f3664301261","fake":false,"type":"class","name":"MS Light Text","namespace":"","comb":"","styleLess":"font-size: 13px; font-weight: 300;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f3664301263","fake":false,"type":"class","name":"MS Toggle Dot","namespace":"","comb":"","styleLess":"position: absolute; left: 3px; z-index: 1; width: 28px; height: 28px; margin-top: 3px; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; background-color: white; box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2); transition-property: left; transition-duration: 200ms; transition-timing-function: ease;","variants":{"main_redirected-checked":{"styleLess":"left: 39px; background-color: white; background-image: none;"}},"children":["fb1a19fb-d47f-1bd0-272d-8f366430126c","fb1a19fb-d47f-1bd0-272d-8f366430126e"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f366430126c","fake":false,"type":"class","name":"Icon","namespace":"","comb":"&","styleLess":"background-image: @img_643d49c5f87a976a6eada98b; background-position: 50% 50%; background-size: 12px; background-repeat: no-repeat;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f366430125d","fake":false,"type":"class","name":"MS Toggle BG","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; z-index: 0; width: 50px; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; background-color: hsla(0, 0.00%, 88.63%, 1.00); transition-property: background-color; transition-duration: 200ms; transition-timing-function: ease;","variants":{},"children":["fb1a19fb-d47f-1bd0-272d-8f366430126a"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"16a8e866-6793-e34b-af1d-bf9bcb63243c","fake":false,"type":"class","name":"MS Embed","namespace":"","comb":"","styleLess":"display: flex; min-height: 50px; margin-bottom: 10px; justify-content: center; align-items: center; background-color: hsla(0, 0.00%, 92.94%, 1.00); font-style: italic;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/643d4922860b62ee32f86100/643d49c5f87a976a6eada98b_nightlight_black_24dp.svg","siteId":"643d4922860b62ee32f86100","width":24,"isHD":false,"height":24,"fileName":"643d49c5f87a976a6eada98b_nightlight_black_24dp.svg","createdOn":"2023-04-17T13:29:41.872Z","origFileName":"nightlight_black_24dp.svg","fileHash":"62156999b180d1e6e71ecc075e11d402","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/643d4922860b62ee32f86100/643d49c5f87a976a6eada98b_nightlight_black_24dp.svg","thumbUrl":"https://cdn.prod.website-files.com/643d4922860b62ee32f86100/643d49c5f87a976a6eada98b_nightlight_black_24dp.svg","_id":"643d49c5f87a976a6eada98b","updatedOn":"2023-04-17T13:29:42.008Z","fileSize":444}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7dd","type":"Block","tag":"div","classes":[],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7de","bee391fc-cfd4-39b0-cad5-7c8f7987b228"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7de","type":"FormCheckboxWrapper","tag":"div","classes":["fb1a19fb-d47f-1bd0-272d-8f366430125c"],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7df","35ce9331-d8e8-61ca-a4b0-287f9e29c7e0","35ce9331-d8e8-61ca-a4b0-287f9e29c7e4","35ce9331-d8e8-61ca-a4b0-287f9e29c7e5"],"data":{"form":{"type":"checkbox"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7df","type":"FormCheckboxInput","tag":"input","classes":["fb1a19fb-d47f-1bd0-272d-8f3664301264"],"children":[],"data":{"attr":{"id":"Checkbox-3","type":"checkbox","name":"Checkbox-3","data-name":"Checkbox 3","required":false,"checked":false},"form":{"type":"checkbox-input","name":"Checkbox 3"},"inputType":"default","displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e0","type":"FormInlineLabel","tag":"label","classes":["fb1a19fb-d47f-1bd0-272d-8f366430125e"],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7e1","35ce9331-d8e8-61ca-a4b0-287f9e29c7e2"],"data":{"form":{"type":"checkbox-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e1","text":true,"v":"Toggle"},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e2","type":"Span","tag":"span","classes":["fb1a19fb-d47f-1bd0-272d-8f3664301261"],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7e3"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e3","text":true,"v":" with Icon"},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e4","type":"Block","tag":"div","classes":["fb1a19fb-d47f-1bd0-272d-8f3664301263","fb1a19fb-d47f-1bd0-272d-8f366430126c"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7e5","type":"Block","tag":"div","classes":["fb1a19fb-d47f-1bd0-272d-8f366430125d"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"bee391fc-cfd4-39b0-cad5-7c8f7987b228","type":"HtmlEmbed","tag":"div","classes":["16a8e866-6793-e34b-af1d-bf9bcb63243c"],"children":[],"v":"Custom CSS\n<style> \n.ms-toggle-checkbox:checked ~.ms-toggle-bg {\n\tbackground-color: #2962ff;\n}\n.ms-toggle-checkbox:checked ~.ms-toggle-dot {\n\tleft: 19px;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"meta":{"html":"Custom CSS\n<style> \n.ms-toggle-checkbox:checked ~.ms-toggle-bg {\n\tbackground-color: #2962ff;\n}\n.ms-toggle-checkbox:checked ~.ms-toggle-dot {\n\tleft: 19px;\n}\n</style>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}}],"styles":[{"_id":"fb1a19fb-d47f-1bd0-272d-8f366430125c","fake":false,"type":"class","name":"MS Toggle Wrap","namespace":"","comb":"","styleLess":"position: relative; width: 50px; height: 34px; margin-bottom: 15px;","variants":{},"children":["fb1a19fb-d47f-1bd0-272d-8f3664301268","fb1a19fb-d47f-1bd0-272d-8f3664301269"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f3664301264","fake":false,"type":"class","name":"MS Toggle Checkbox","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f366430125e","fake":false,"type":"class","name":"MS Toggle Label","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: auto; bottom: 0%; z-index: 2; display: flex; padding-left: 65px; justify-content: flex-start; align-items: center; font-weight: 700; white-space: nowrap;","variants":{},"children":["fb1a19fb-d47f-1bd0-272d-8f366430126b","fb1a19fb-d47f-1bd0-272d-8f366430126f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f3664301261","fake":false,"type":"class","name":"MS Light Text","namespace":"","comb":"","styleLess":"font-size: 13px; font-weight: 300;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f3664301263","fake":false,"type":"class","name":"MS Toggle Dot","namespace":"","comb":"","styleLess":"position: absolute; left: 3px; z-index: 1; width: 28px; height: 28px; margin-top: 3px; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; background-color: white; box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2); transition-property: left; transition-duration: 200ms; transition-timing-function: ease;","variants":{"main_redirected-checked":{"styleLess":"left: 39px; background-color: white; background-image: none;"}},"children":["fb1a19fb-d47f-1bd0-272d-8f366430126c","fb1a19fb-d47f-1bd0-272d-8f366430126e"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f366430126c","fake":false,"type":"class","name":"Icon","namespace":"","comb":"&","styleLess":"background-image: @img_643d49c5f87a976a6eada98b; background-position: 50% 50%; background-size: 12px; background-repeat: no-repeat;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"fb1a19fb-d47f-1bd0-272d-8f366430125d","fake":false,"type":"class","name":"MS Toggle BG","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; z-index: 0; width: 50px; border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; background-color: hsla(0, 0.00%, 88.63%, 1.00); transition-property: background-color; transition-duration: 200ms; transition-timing-function: ease;","variants":{},"children":["fb1a19fb-d47f-1bd0-272d-8f366430126a"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"16a8e866-6793-e34b-af1d-bf9bcb63243c","fake":false,"type":"class","name":"MS Embed","namespace":"","comb":"","styleLess":"display: flex; min-height: 50px; margin-bottom: 10px; justify-content: center; align-items: center; background-color: hsla(0, 0.00%, 92.94%, 1.00); font-style: italic;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/643d4922860b62ee32f86100/643d49c5f87a976a6eada98b_nightlight_black_24dp.svg","siteId":"643d4922860b62ee32f86100","width":24,"isHD":false,"height":24,"fileName":"643d49c5f87a976a6eada98b_nightlight_black_24dp.svg","createdOn":"2023-04-17T13:29:41.872Z","origFileName":"nightlight_black_24dp.svg","fileHash":"62156999b180d1e6e71ecc075e11d402","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/643d4922860b62ee32f86100/643d49c5f87a976a6eada98b_nightlight_black_24dp.svg","thumbUrl":"https://cdn.prod.website-files.com/643d4922860b62ee32f86100/643d49c5f87a976a6eada98b_nightlight_black_24dp.svg","_id":"643d49c5f87a976a6eada98b","updatedOn":"2023-04-17T13:29:42.008Z","fileSize":444}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser not supported. Use
CC Chrome or SS Safari.

About this component

AI Generated

Component Description (Generated by AI)

The Checkbox Toggle w/ Icon is a stylish and interactive toggle switch designed for forms, featuring an icon and customizable styles. It enhances user experience by providing a clear visual indication of the toggle state.

Key Features:

  • Customizable toggle switch with icon integration
  • CSS styles for smooth transitions and visual effects
  • Responsive design suitable for various devices
  • Easy to implement in Webflow projects

Design Elements:

  • Rounded toggle background with a light color scheme
  • Icon displayed within the toggle for enhanced visual appeal
  • Smooth transition effects when toggled

Potential Use Cases:

  • Web forms requiring user preferences (e.g., newsletter subscriptions)
  • E-commerce sites for toggling product options
  • Mobile applications needing intuitive settings adjustments
  • Interactive surveys and feedback forms

Conclusion: The Checkbox Toggle w/ Icon is a versatile component that not only improves the aesthetic of forms but also enhances user interaction, making it a valuable addition to any Webflow project.

Similar Components

View All