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":"2e3c6e90-76c4-76d5-64eb-a2413af7dbdd","type":"Block","tag":"div","classes":[],"children":["2e3c6e90-76c4-76d5-64eb-a2413af7dbde","2e3c6e90-76c4-76d5-64eb-a2413af7dbe2","ed4f15b1-90d5-6feb-20d6-0b268b7232c3"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbde","type":"FormBlockLabel","tag":"label","classes":[],"children":["2e3c6e90-76c4-76d5-64eb-a2413af7dbdf","2e3c6e90-76c4-76d5-64eb-a2413af7dbe0"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"6-Digit-Code-3","id":""},"visibility":{"conditions":[]}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbdf","text":true,"v":"6-Digit Code "},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe0","type":"Span","tag":"span","classes":["05001551-a65c-e527-fb19-4f89816fb87b"],"children":["2e3c6e90-76c4-76d5-64eb-a2413af7dbe1"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe1","text":true,"v":"(No JavaScript)"},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe2","type":"Block","tag":"div","classes":["15080f6f-be39-2862-d94e-39015c9375db","05001551-a65c-e527-fb19-4f89816fb87e"],"children":["2e3c6e90-76c4-76d5-64eb-a2413af7dbe3","2e3c6e90-76c4-76d5-64eb-a2413af7dbe4","2e3c6e90-76c4-76d5-64eb-a2413af7dbe5","2e3c6e90-76c4-76d5-64eb-a2413af7dbe6","2e3c6e90-76c4-76d5-64eb-a2413af7dbe7","2e3c6e90-76c4-76d5-64eb-a2413af7dbe8","2e3c6e90-76c4-76d5-64eb-a2413af7dbe9","2e3c6e90-76c4-76d5-64eb-a2413af7dbea"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe3","type":"FormTextInput","tag":"input","classes":["05001551-a65c-e527-fb19-4f89816fb87c"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"6-Digit-Code-2","data-name":"6 Digit Code 2","placeholder":"000000","type":"text","id":"6-Digit-Code-2","disabled":false,"required":true},"xattr":[{"name":"data-ms-member","value":"token"},{"name":"maxlength","value":"6"},{"name":"minlength","value":"6"}],"form":{"name":"6 Digit Code 2","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe4","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe5","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe6","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe7","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe8","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe9","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbea","type":"Block","tag":"div","classes":["05001551-a65c-e527-fb19-4f89816fb87d"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ed4f15b1-90d5-6feb-20d6-0b268b7232c3","type":"HtmlEmbed","tag":"div","classes":["15080f6f-be39-2862-d94e-39015c9375dd"],"children":[],"v":"CUSTOM CSS\n<style>\n.ms-token-input:hover ~ .ms-input {\n border-color: #2962ff;\n box-shadow: none;\n}\n.ms-token-input:focus ~ .ms-input {\n\tborder-color: #2962ff;\n box-shadow: none;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"CUSTOM CSS\n<style>\n.ms-token-input:hover ~ .ms-input {\n border-color: #2962ff;\n box-shadow: none;\n}\n.ms-token-input:focus ~ .ms-input {\n\tborder-color: #2962ff;\n box-shadow: none;\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false},"type":"html"}}}],"styles":[{"_id":"05001551-a65c-e527-fb19-4f89816fb87b","fake":false,"type":"class","name":"MS Light Text","namespace":"","comb":"","styleLess":"font-size: 13px; font-weight: 300;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"15080f6f-be39-2862-d94e-39015c9375db","fake":false,"type":"class","name":"MS Input Wrap","namespace":"","comb":"","styleLess":"position: relative; display: flex; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;","variants":{},"children":["05001551-a65c-e527-fb19-4f89816fb87e"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"05001551-a65c-e527-fb19-4f89816fb87e","fake":false,"type":"class","name":"Token","namespace":"","comb":"&","styleLess":"width: 300px; margin-bottom: 10px; grid-column-gap: 10px;","variants":{"tiny":{"styleLess":"overflow: hidden;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"05001551-a65c-e527-fb19-4f89816fb87c","fake":false,"type":"class","name":"MS Token Input","namespace":"","comb":"","styleLess":"position: absolute; left: 0px; top: 0px; z-index: 2; width: 400px; height: 50px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 12px; border-top-style: none; border-top-width: 1px; border-top-color: black; border-right-style: none; border-right-width: 1px; border-right-color: black; border-bottom-style: none; border-bottom-width: 1px; border-bottom-color: black; border-left-style: none; border-left-width: 1px; border-left-color: black; background-color: transparent; font-family: Verdana; color: hsla(0, 0.00%, 0.00%, 1.00); font-size: 23px; font-weight: 400; text-align: left; letter-spacing: 35.5px; text-transform: uppercase;","variants":{"main_placeholder":{"styleLess":"color: hsla(209.0322580645161, 12.65%, 48.04%, 1.00); font-weight: 400;"},"tiny":{"styleLess":"margin-left: 0px; font-size: 20px; letter-spacing: 30.5px;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","fake":false,"type":"class","name":"MS Input","namespace":"","comb":"","styleLess":"position: relative; min-height: 40px; margin-bottom: 20px; padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; 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: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: white; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1); transition-property: box-shadow, border-color; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: hsla(237, 47.06%, 13.06%, 1.00);","variants":{"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 56.47%, 1.00);"},"main_hover":{"styleLess":"z-index: 2; border-top-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-right-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-bottom-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-left-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); box-shadow: none /* 0 5px 10px -5px rgba(0, 0, 0, 0.1) */;"}},"children":["15080f6f-be39-2862-d94e-39015c9375e2","05001551-a65c-e527-fb19-4f89816fb87f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"05001551-a65c-e527-fb19-4f89816fb87f","fake":false,"type":"class","name":"Token Fake","namespace":"","comb":"&","styleLess":"width: 40px; height: 50px; background-color: transparent;","variants":{"tiny":{"styleLess":"width: 33.5px;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"05001551-a65c-e527-fb19-4f89816fb87d","fake":false,"type":"class","name":"MS Token Overflow","namespace":"","comb":"","styleLess":"position: absolute; left: 100%; top: 0%; right: auto; z-index: 5; width: 30px; height: 50px; background-color: white;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"15080f6f-be39-2862-d94e-39015c9375dd","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}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbdd","type":"Block","tag":"div","classes":[],"children":["2e3c6e90-76c4-76d5-64eb-a2413af7dbde","2e3c6e90-76c4-76d5-64eb-a2413af7dbe2","ed4f15b1-90d5-6feb-20d6-0b268b7232c3"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbde","type":"FormBlockLabel","tag":"label","classes":[],"children":["2e3c6e90-76c4-76d5-64eb-a2413af7dbdf","2e3c6e90-76c4-76d5-64eb-a2413af7dbe0"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"6-Digit-Code-3","id":""},"visibility":{"conditions":[]}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbdf","text":true,"v":"6-Digit Code "},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe0","type":"Span","tag":"span","classes":["05001551-a65c-e527-fb19-4f89816fb87b"],"children":["2e3c6e90-76c4-76d5-64eb-a2413af7dbe1"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe1","text":true,"v":"(No JavaScript)"},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe2","type":"Block","tag":"div","classes":["15080f6f-be39-2862-d94e-39015c9375db","05001551-a65c-e527-fb19-4f89816fb87e"],"children":["2e3c6e90-76c4-76d5-64eb-a2413af7dbe3","2e3c6e90-76c4-76d5-64eb-a2413af7dbe4","2e3c6e90-76c4-76d5-64eb-a2413af7dbe5","2e3c6e90-76c4-76d5-64eb-a2413af7dbe6","2e3c6e90-76c4-76d5-64eb-a2413af7dbe7","2e3c6e90-76c4-76d5-64eb-a2413af7dbe8","2e3c6e90-76c4-76d5-64eb-a2413af7dbe9","2e3c6e90-76c4-76d5-64eb-a2413af7dbea"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe3","type":"FormTextInput","tag":"input","classes":["05001551-a65c-e527-fb19-4f89816fb87c"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"6-Digit-Code-2","data-name":"6 Digit Code 2","placeholder":"000000","type":"text","id":"6-Digit-Code-2","disabled":false,"required":true},"xattr":[{"name":"data-ms-member","value":"token"},{"name":"maxlength","value":"6"},{"name":"minlength","value":"6"}],"form":{"name":"6 Digit Code 2","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe4","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe5","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe6","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe7","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe8","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbe9","type":"Block","tag":"div","classes":["f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","05001551-a65c-e527-fb19-4f89816fb87f"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2e3c6e90-76c4-76d5-64eb-a2413af7dbea","type":"Block","tag":"div","classes":["05001551-a65c-e527-fb19-4f89816fb87d"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ed4f15b1-90d5-6feb-20d6-0b268b7232c3","type":"HtmlEmbed","tag":"div","classes":["15080f6f-be39-2862-d94e-39015c9375dd"],"children":[],"v":"CUSTOM CSS\n<style>\n.ms-token-input:hover ~ .ms-input {\n border-color: #2962ff;\n box-shadow: none;\n}\n.ms-token-input:focus ~ .ms-input {\n\tborder-color: #2962ff;\n box-shadow: none;\n}\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"CUSTOM CSS\n<style>\n.ms-token-input:hover ~ .ms-input {\n border-color: #2962ff;\n box-shadow: none;\n}\n.ms-token-input:focus ~ .ms-input {\n\tborder-color: #2962ff;\n box-shadow: none;\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false},"type":"html"}}}],"styles":[{"_id":"05001551-a65c-e527-fb19-4f89816fb87b","fake":false,"type":"class","name":"MS Light Text","namespace":"","comb":"","styleLess":"font-size: 13px; font-weight: 300;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"15080f6f-be39-2862-d94e-39015c9375db","fake":false,"type":"class","name":"MS Input Wrap","namespace":"","comb":"","styleLess":"position: relative; display: flex; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;","variants":{},"children":["05001551-a65c-e527-fb19-4f89816fb87e"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"05001551-a65c-e527-fb19-4f89816fb87e","fake":false,"type":"class","name":"Token","namespace":"","comb":"&","styleLess":"width: 300px; margin-bottom: 10px; grid-column-gap: 10px;","variants":{"tiny":{"styleLess":"overflow: hidden;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"05001551-a65c-e527-fb19-4f89816fb87c","fake":false,"type":"class","name":"MS Token Input","namespace":"","comb":"","styleLess":"position: absolute; left: 0px; top: 0px; z-index: 2; width: 400px; height: 50px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 12px; border-top-style: none; border-top-width: 1px; border-top-color: black; border-right-style: none; border-right-width: 1px; border-right-color: black; border-bottom-style: none; border-bottom-width: 1px; border-bottom-color: black; border-left-style: none; border-left-width: 1px; border-left-color: black; background-color: transparent; font-family: Verdana; color: hsla(0, 0.00%, 0.00%, 1.00); font-size: 23px; font-weight: 400; text-align: left; letter-spacing: 35.5px; text-transform: uppercase;","variants":{"main_placeholder":{"styleLess":"color: hsla(209.0322580645161, 12.65%, 48.04%, 1.00); font-weight: 400;"},"tiny":{"styleLess":"margin-left: 0px; font-size: 20px; letter-spacing: 30.5px;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"f4552d5e-35bd-6ab9-a4b3-c7bfc4d206d2","fake":false,"type":"class","name":"MS Input","namespace":"","comb":"","styleLess":"position: relative; min-height: 40px; margin-bottom: 20px; padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; 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: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background-color: white; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1); transition-property: box-shadow, border-color; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: hsla(237, 47.06%, 13.06%, 1.00);","variants":{"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 56.47%, 1.00);"},"main_hover":{"styleLess":"z-index: 2; border-top-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-right-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-bottom-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); border-left-color: hsla(224.01869158878503, 100.00%, 58.04%, 1.00); box-shadow: none /* 0 5px 10px -5px rgba(0, 0, 0, 0.1) */;"}},"children":["15080f6f-be39-2862-d94e-39015c9375e2","05001551-a65c-e527-fb19-4f89816fb87f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"05001551-a65c-e527-fb19-4f89816fb87f","fake":false,"type":"class","name":"Token Fake","namespace":"","comb":"&","styleLess":"width: 40px; height: 50px; background-color: transparent;","variants":{"tiny":{"styleLess":"width: 33.5px;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"05001551-a65c-e527-fb19-4f89816fb87d","fake":false,"type":"class","name":"MS Token Overflow","namespace":"","comb":"","styleLess":"position: absolute; left: 100%; top: 0%; right: auto; z-index: 5; width: 30px; height: 50px; background-color: white;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"15080f6f-be39-2862-d94e-39015c9375dd","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}}
Browser not supported. Use
Chrome or Safari.
Chrome or Safari.
About this component
AI Generated
Component Description (Generated by AI)
The OPT Input component is designed for capturing a 6-digit code input from users, featuring a clean and modern interface without the need for JavaScript functionality.
Key Features:
- 6-digit code input field
- Customizable CSS for hover and focus states
- Responsive design suitable for various devices
- Required field validation
- Placeholder text for user guidance
Design Elements:
- Minimalistic layout with a focus on usability
- Light text styling for clarity
- Subtle hover effects with border color changes
- Flexible input field dimensions
Potential Use Cases:
- Two-factor authentication forms
- Online verification processes
- Membership or subscription sign-up forms
- Secure access to sensitive information
- Event registration requiring confirmation codes
Conclusion: The OPT Input component is versatile and user-friendly, making it an excellent choice for any application that requires secure code entry while maintaining a sleek design.