Concurso: Cree una aplicación SaaS entre el 29 de mayo y el 14 de junio y tenga la oportunidad de ganar premios en metálico, planes gratuitos y mucho más.
Cargando Componente...
Cargando
Gracias. Voy a actualizar
este proyecto lo antes posible.
este proyecto lo antes posible.
¡Uy! Algo ha ido mal al enviar el formulario.
Cómo activar la autenticación de Google
Cómo activar la autenticación de Facebook
Cómo activar la autenticación de Spotify
Cómo activar la autenticación de Dribbble
Cómo activar la autenticación de Github
Cómo activar la autenticación de LinkedIn
Cómo activar el inicio de sesión sin contraseña
Cómo configurar la validación de contraseñas
Cómo mostrar/ocultar la contraseña
Cómo trabajar con imágenes de perfil
Cómo añadir un flujo de olvido de contraseña
Cómo trabajar con casillas de verificación
Cómo configurar las tablas de precios
Acerca del portal de clientes de Stripe
{"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}}
Clonar en Webflow
Componente de copia
{"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}}
Navegador no compatible. Utilice
Chrome o Safari.
Chrome o Safari.
Acerca de este componente
Generado por IA
Descripción del componente (generada por 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.
Características principales:
- 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
Elementos de diseño:
- 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
Posibles casos de uso:
- 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.
Empezar a construir
Empieza a construir tus sueños
Memberstack es 100% gratis hasta que estés listo para lanzarla - así que, ¿a qué estás esperando? Crea tu primera aplicación y empieza a construir hoy mismo.
.png)
