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-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}}
Clonar en Webflow
Componente de copia
{"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}}
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 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.
Características principales:
- Customizable toggle switch with icon integration
- CSS styles for smooth transitions and visual effects
- Diseño adaptable a varios dispositivos
- Easy to implement in Webflow projects
Elementos de diseño:
- Rounded toggle background with a light color scheme
- Icon displayed within the toggle for enhanced visual appeal
- Smooth transition effects when toggled
Posibles casos de uso:
- 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.
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.