Competition: Build a SaaS app between May 29 - June 14 and get a chance to win cash prizes, free plans & more!
Loading Component...
Loading
Thank you! I'll update
this project ASAP.
this project ASAP.
Oops! Something went wrong while submitting the form.
How to enable Google authentication
How to enable Facebook authentication
How to enable Spotify authentication
How to enable Dribbble authentication
How to enable Github authentication
How to enable LinkedIn authentication
How to enable passwordless logins
How to configure password validation
How to show/hide password
How to work with profile images
How to add a forgot password flow
How to work with checkboxes
How to configure pricing tables
About the Stripe Customer Portal
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7c4","type":"Block","tag":"div","classes":[],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7c5","e289c0d1-fadc-66c7-1f14-821b3dcfca9c"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7c5","type":"FormCheckboxWrapper","tag":"div","classes":["fb1a19fb-d47f-1bd0-272d-8f366430125c"],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7c6","35ce9331-d8e8-61ca-a4b0-287f9e29c7c7","35ce9331-d8e8-61ca-a4b0-287f9e29c7c9","35ce9331-d8e8-61ca-a4b0-287f9e29c7ca"],"data":{"form":{"type":"checkbox"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7c6","type":"FormCheckboxInput","tag":"input","classes":["fb1a19fb-d47f-1bd0-272d-8f3664301264"],"children":[],"data":{"attr":{"id":"Checkbox-1","type":"checkbox","name":"Checkbox-1","data-name":"Checkbox 1","required":false,"checked":true},"form":{"type":"checkbox-input","name":"Checkbox 1"},"inputType":"default","displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7c7","type":"FormInlineLabel","tag":"label","classes":["fb1a19fb-d47f-1bd0-272d-8f366430125e"],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7c8"],"data":{"form":{"type":"checkbox-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7c8","text":true,"v":"Toggle ON"},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7c9","type":"Block","tag":"div","classes":["fb1a19fb-d47f-1bd0-272d-8f3664301263"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7ca","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":"e289c0d1-fadc-66c7-1f14-821b3dcfca9c","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-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-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":[],"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-287f9e29c7c4","type":"Block","tag":"div","classes":[],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7c5","e289c0d1-fadc-66c7-1f14-821b3dcfca9c"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7c5","type":"FormCheckboxWrapper","tag":"div","classes":["fb1a19fb-d47f-1bd0-272d-8f366430125c"],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7c6","35ce9331-d8e8-61ca-a4b0-287f9e29c7c7","35ce9331-d8e8-61ca-a4b0-287f9e29c7c9","35ce9331-d8e8-61ca-a4b0-287f9e29c7ca"],"data":{"form":{"type":"checkbox"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7c6","type":"FormCheckboxInput","tag":"input","classes":["fb1a19fb-d47f-1bd0-272d-8f3664301264"],"children":[],"data":{"attr":{"id":"Checkbox-1","type":"checkbox","name":"Checkbox-1","data-name":"Checkbox 1","required":false,"checked":true},"form":{"type":"checkbox-input","name":"Checkbox 1"},"inputType":"default","displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7c7","type":"FormInlineLabel","tag":"label","classes":["fb1a19fb-d47f-1bd0-272d-8f366430125e"],"children":["35ce9331-d8e8-61ca-a4b0-287f9e29c7c8"],"data":{"form":{"type":"checkbox-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7c8","text":true,"v":"Toggle ON"},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7c9","type":"Block","tag":"div","classes":["fb1a19fb-d47f-1bd0-272d-8f3664301263"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"35ce9331-d8e8-61ca-a4b0-287f9e29c7ca","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":"e289c0d1-fadc-66c7-1f14-821b3dcfca9c","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-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-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":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser not supported. Use
Chrome or Safari.
Chrome or Safari.
About this component
AI Generated
Component Description (Generated by AI)
The Toggle Checkbox is a customizable form component designed to enhance user interaction with a visually appealing toggle switch. It allows users to easily switch between two states, making it ideal for various applications.
Key Features:
- Customizable toggle design with CSS
- Responsive and user-friendly interface
- Supports checkbox functionality with labels
- Includes transition effects for smooth interaction
- Lightweight and easy to integrate into existing forms
Design Elements:
- Rounded toggle background with a smooth color transition
- Floating toggle dot that moves when toggled
- Minimalistic design suitable for modern web applications
- Custom CSS for further styling options
Potential Use Cases:
- E-commerce websites for user preferences (e.g., newsletter subscriptions)
- Web applications requiring user settings toggles
- Forms that need to capture binary choices (yes/no)
- Mobile applications for quick user interactions
- Dashboard interfaces for toggling features on/off
Conclusion: The Toggle Checkbox is a versatile and stylish component that enhances user experience by providing a clear and interactive way to make selections. Its customizable nature makes it suitable for a wide range of applications.
Start building
Start building your dreams
Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.
.png)
