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":"262ff702-fa9f-24af-e1e2-e4a00005e3e3","type":"Block","tag":"div","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b3"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3e4","262ff702-fa9f-24af-e1e2-e4a00005e3e6","262ff702-fa9f-24af-e1e2-e4a00005e3f4","262ff702-fa9f-24af-e1e2-e4a00005e402"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e4","type":"FormBlockLabel","tag":"label","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01ad"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3e5"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"email-2","id":""},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e5","text":true,"v":"Radio cards Rows"},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e6","type":"FormRadioWrapper","tag":"div","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b1"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3e7","262ff702-fa9f-24af-e1e2-e4a00005e3e8"],"data":{"form":{"type":"radio"},"search":{"exclude":false},"xattr":[{"name":"checked","value":""}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e7","type":"FormRadioInput","tag":"input","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01ac"],"children":[],"data":{"form":{"type":"radio-input","name":"Card Row"},"inputType":"custom","search":{"exclude":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"First-Option","type":"radio","name":"Card-Row","value":"First Option","data-name":"Card Row","required":false},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e8","type":"FormInlineLabel","tag":"label","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b4"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3e9","262ff702-fa9f-24af-e1e2-e4a00005e3ea","262ff702-fa9f-24af-e1e2-e4a00005e3ec","262ff702-fa9f-24af-e1e2-e4a00005e3ed","262ff702-fa9f-24af-e1e2-e4a00005e3ee","262ff702-fa9f-24af-e1e2-e4a00005e3f0","262ff702-fa9f-24af-e1e2-e4a00005e3f2"],"data":{"form":{"type":"radio-label"},"search":{"exclude":false},"clearfix":true,"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e9","text":true,"v":"First Option "},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ea","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b2"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3eb"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3eb","text":true,"v":"100"},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ec","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ed","text":true,"v":""},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ee","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b5"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3ef"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ef","text":true,"v":"This is a description which is longer. "},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f0","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b6"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3f1"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f1","text":true,"v":"units"},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f2","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b5"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3f3"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f3","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f4","type":"FormRadioWrapper","tag":"div","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b1"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3f5","262ff702-fa9f-24af-e1e2-e4a00005e3f6"],"data":{"form":{"type":"radio"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f5","type":"FormRadioInput","tag":"input","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01ac"],"children":[],"data":{"form":{"type":"radio-input","name":"Card Row"},"inputType":"custom","search":{"exclude":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"},{"name":"checked","value":"checked"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"Second-Option","type":"radio","name":"Card-Row","value":"Second Option","data-name":"Card Row","required":false},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f6","type":"FormInlineLabel","tag":"label","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b4"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3f7","262ff702-fa9f-24af-e1e2-e4a00005e3f8","262ff702-fa9f-24af-e1e2-e4a00005e3fa","262ff702-fa9f-24af-e1e2-e4a00005e3fb","262ff702-fa9f-24af-e1e2-e4a00005e3fc","262ff702-fa9f-24af-e1e2-e4a00005e3fe","262ff702-fa9f-24af-e1e2-e4a00005e400"],"data":{"form":{"type":"radio-label"},"search":{"exclude":false},"clearfix":true,"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f7","text":true,"v":"Second Option "},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f8","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b2"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3f9"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f9","text":true,"v":"200"},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3fa","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3fb","text":true,"v":""},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3fc","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b5"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3fd"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3fd","text":true,"v":"This is a description which is longer. "},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3fe","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b6"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3ff"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ff","text":true,"v":"units"},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e400","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b5"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e401"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e401","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e402","type":"HtmlEmbed","tag":"div","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b0"],"children":[],"v":"Custom CSS (Hide me)\n\n<style>\n.ms-hide:checked ~ .ms-radio-card {\n\tborder-color: #2962ff;\n outline: 2px solid #101570\n\n}\n.ms-hide:checked ~ .ms-svg {\n\tdisplay: flex;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"Custom CSS (Hide me)\n\n<style>\n.ms-hide:checked ~ .ms-radio-card {\n\tborder-color: #2962ff;\n outline: 2px solid #101570\n\n}\n.ms-hide:checked ~ .ms-svg {\n\tdisplay: flex;\n}\n</style>","div":false,"iframe":false,"script":false},"type":"html"}}}],"styles":[{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b1","fake":false,"type":"class","name":"ms-radio-card","namespace":"","comb":"","styleLess":"position: relative; width: 100%; padding-top: 12px; padding-right: 16px; padding-bottom: 10px; padding-left: 16px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1); color: hsla(237, 47.06%, 13.06%, 1.00); font-weight: 700;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01ac","fake":false,"type":"class","name":"ms-radio-border","namespace":"","comb":"","styleLess":"display: none;","variants":{"main_redirected-checked":{"styleLess":"position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; z-index: 1; display: block; width: auto; height: auto; margin-top: 0px; margin-left: 0px; border-top-width: 3px; border-top-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-right-width: 3px; border-right-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-bottom-width: 3px; border-bottom-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-left-width: 3px; border-left-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b2","fake":false,"type":"class","name":"ms-card-text-right","namespace":"","comb":"","styleLess":"padding-right: 4px; padding-left: 4px; float: right; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(237, 75.10%, 25.08%, 0.10); line-height: 1.4em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b6","fake":false,"type":"class","name":"ms-hint-text","namespace":"","comb":"","styleLess":"float: right; font-weight: 400;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b5","fake":false,"type":"class","name":"ms-help-text","namespace":"","comb":"","styleLess":"margin-top: -15px; margin-bottom: 15px; opacity: 0.8; font-size: 90%; font-weight: 300;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01ad","fake":false,"type":"class","name":"ms-input-label","namespace":"","comb":"","styleLess":"margin-bottom: 5px; color: hsla(237, 47.06%, 13.06%, 1.00); font-weight: 700;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b4","fake":false,"type":"class","name":"ms-radio-contents","namespace":"","comb":"","styleLess":"position: relative; z-index: 2; width: 100%; font-weight: 700;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b3","fake":false,"type":"class","name":"ms-radio-group","namespace":"","comb":"","styleLess":"margin-bottom: 30px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b0","fake":false,"type":"class","name":"ms-embed","namespace":"","comb":"","styleLess":"display: flex; min-height: 80px; 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,"universalBindingsRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e3","type":"Block","tag":"div","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b3"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3e4","262ff702-fa9f-24af-e1e2-e4a00005e3e6","262ff702-fa9f-24af-e1e2-e4a00005e3f4","262ff702-fa9f-24af-e1e2-e4a00005e402"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e4","type":"FormBlockLabel","tag":"label","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01ad"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3e5"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"email-2","id":""},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e5","text":true,"v":"Radio cards Rows"},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e6","type":"FormRadioWrapper","tag":"div","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b1"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3e7","262ff702-fa9f-24af-e1e2-e4a00005e3e8"],"data":{"form":{"type":"radio"},"search":{"exclude":false},"xattr":[{"name":"checked","value":""}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e7","type":"FormRadioInput","tag":"input","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01ac"],"children":[],"data":{"form":{"type":"radio-input","name":"Card Row"},"inputType":"custom","search":{"exclude":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"First-Option","type":"radio","name":"Card-Row","value":"First Option","data-name":"Card Row","required":false},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e8","type":"FormInlineLabel","tag":"label","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b4"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3e9","262ff702-fa9f-24af-e1e2-e4a00005e3ea","262ff702-fa9f-24af-e1e2-e4a00005e3ec","262ff702-fa9f-24af-e1e2-e4a00005e3ed","262ff702-fa9f-24af-e1e2-e4a00005e3ee","262ff702-fa9f-24af-e1e2-e4a00005e3f0","262ff702-fa9f-24af-e1e2-e4a00005e3f2"],"data":{"form":{"type":"radio-label"},"search":{"exclude":false},"clearfix":true,"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3e9","text":true,"v":"First Option "},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ea","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b2"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3eb"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3eb","text":true,"v":"100"},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ec","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ed","text":true,"v":""},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ee","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b5"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3ef"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ef","text":true,"v":"This is a description which is longer. "},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f0","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b6"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3f1"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f1","text":true,"v":"units"},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f2","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b5"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3f3"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f3","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f4","type":"FormRadioWrapper","tag":"div","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b1"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3f5","262ff702-fa9f-24af-e1e2-e4a00005e3f6"],"data":{"form":{"type":"radio"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f5","type":"FormRadioInput","tag":"input","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01ac"],"children":[],"data":{"form":{"type":"radio-input","name":"Card Row"},"inputType":"custom","search":{"exclude":false},"xattr":[{"name":"data-ms-member","value":"FIELD_ID"},{"name":"checked","value":"checked"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"Second-Option","type":"radio","name":"Card-Row","value":"Second Option","data-name":"Card Row","required":false},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f6","type":"FormInlineLabel","tag":"label","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b4"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3f7","262ff702-fa9f-24af-e1e2-e4a00005e3f8","262ff702-fa9f-24af-e1e2-e4a00005e3fa","262ff702-fa9f-24af-e1e2-e4a00005e3fb","262ff702-fa9f-24af-e1e2-e4a00005e3fc","262ff702-fa9f-24af-e1e2-e4a00005e3fe","262ff702-fa9f-24af-e1e2-e4a00005e400"],"data":{"form":{"type":"radio-label"},"search":{"exclude":false},"clearfix":true,"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f7","text":true,"v":"Second Option "},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f8","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b2"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3f9"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3f9","text":true,"v":"200"},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3fa","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3fb","text":true,"v":""},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3fc","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b5"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3fd"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3fd","text":true,"v":"This is a description which is longer. "},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3fe","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b6"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e3ff"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e3ff","text":true,"v":"units"},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e400","type":"Span","tag":"span","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b5"],"children":["262ff702-fa9f-24af-e1e2-e4a00005e401"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e401","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"262ff702-fa9f-24af-e1e2-e4a00005e402","type":"HtmlEmbed","tag":"div","classes":["2f877ec4-939b-4ae8-e0b6-ba20a7cc01b0"],"children":[],"v":"Custom CSS (Hide me)\n\n<style>\n.ms-hide:checked ~ .ms-radio-card {\n\tborder-color: #2962ff;\n outline: 2px solid #101570\n\n}\n.ms-hide:checked ~ .ms-svg {\n\tdisplay: flex;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"Custom CSS (Hide me)\n\n<style>\n.ms-hide:checked ~ .ms-radio-card {\n\tborder-color: #2962ff;\n outline: 2px solid #101570\n\n}\n.ms-hide:checked ~ .ms-svg {\n\tdisplay: flex;\n}\n</style>","div":false,"iframe":false,"script":false},"type":"html"}}}],"styles":[{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b1","fake":false,"type":"class","name":"ms-radio-card","namespace":"","comb":"","styleLess":"position: relative; width: 100%; padding-top: 12px; padding-right: 16px; padding-bottom: 10px; padding-left: 16px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(238.06451612903226, 46.27%, 13.14%, 0.25); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1); color: hsla(237, 47.06%, 13.06%, 1.00); font-weight: 700;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01ac","fake":false,"type":"class","name":"ms-radio-border","namespace":"","comb":"","styleLess":"display: none;","variants":{"main_redirected-checked":{"styleLess":"position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; z-index: 1; display: block; width: auto; height: auto; margin-top: 0px; margin-left: 0px; border-top-width: 3px; border-top-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-right-width: 3px; border-right-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-bottom-width: 3px; border-bottom-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-left-width: 3px; border-left-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b2","fake":false,"type":"class","name":"ms-card-text-right","namespace":"","comb":"","styleLess":"padding-right: 4px; padding-left: 4px; float: right; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: hsla(237, 75.10%, 25.08%, 0.10); line-height: 1.4em;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b6","fake":false,"type":"class","name":"ms-hint-text","namespace":"","comb":"","styleLess":"float: right; font-weight: 400;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b5","fake":false,"type":"class","name":"ms-help-text","namespace":"","comb":"","styleLess":"margin-top: -15px; margin-bottom: 15px; opacity: 0.8; font-size: 90%; font-weight: 300;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01ad","fake":false,"type":"class","name":"ms-input-label","namespace":"","comb":"","styleLess":"margin-bottom: 5px; color: hsla(237, 47.06%, 13.06%, 1.00); font-weight: 700;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b4","fake":false,"type":"class","name":"ms-radio-contents","namespace":"","comb":"","styleLess":"position: relative; z-index: 2; width: 100%; font-weight: 700;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b3","fake":false,"type":"class","name":"ms-radio-group","namespace":"","comb":"","styleLess":"margin-bottom: 30px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2f877ec4-939b-4ae8-e0b6-ba20a7cc01b0","fake":false,"type":"class","name":"ms-embed","namespace":"","comb":"","styleLess":"display: flex; min-height: 80px; 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,"universalBindingsRemovedCount":0}}
Browser not supported. Use
Chrome or Safari.
Chrome or Safari.
About this component
AI Generated
Component Description (Generated by AI)
Radio Cards is a versatile Webflow component designed for creating interactive radio button selections within forms. It features a clean layout and customizable styles to enhance user experience.
Key Features:
- Customizable radio button options
- Integrated form labels and descriptions
- Responsive design suitable for various devices
- Includes custom CSS for enhanced styling
- Easy integration into existing Webflow projects
Design Elements:
- Modern and clean visual style
- Soft color palette with shades of blue and gray
- Rounded corners and subtle shadows for depth
- Clear typography with emphasis on labels and options
Potential Use Cases:
- Surveys and feedback forms for businesses
- Product selection forms for e-commerce sites
- Event registration forms requiring user preferences
- Interactive quizzes and assessments
- User preference settings in web applications
Conclusion: Radio Cards is a highly adaptable component that enhances form interactivity, making it an excellent choice for a variety of applications across different industries.