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":"285d23f8-1ae0-4539-2442-38c0a07d45a0","type":"Block","tag":"div","classes":[],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc81f","d9bd2dfc-8cb5-e426-bc95-28e1e16fc829"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc81f","type":"Block","tag":"div","classes":["6b8902a2-181b-b570-6fc0-60668a93022f"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc820","d9bd2dfc-8cb5-e426-bc95-28e1e16fc821"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc820","text":true,"v":"Custom Multi-select using checkboxes"},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc821","type":"Span","tag":"span","classes":["6b8902a2-181b-b570-6fc0-60668a930241"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc822"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc822","text":true,"v":""},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc829","type":"Block","tag":"div","classes":["5eb75594-6c3e-db31-b9ee-097ba00a8425"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc82a","d9bd2dfc-8cb5-e426-bc95-28e1e16fc82e","d9bd2dfc-8cb5-e426-bc95-28e1e16fc832","d9bd2dfc-8cb5-e426-bc95-28e1e16fc836","c179dbb4-5496-0188-ff57-bf0e445eb374","7d25bef3-9413-b0b8-f869-1f61277580b9","d7c35732-f2c1-ba3d-de58-e06fb3ceb91e"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-member","value":"more"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82a","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc82b","d9bd2dfc-8cb5-e426-bc95-28e1e16fc82c"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82b","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135","ef87cee6-e256-7d29-0598-deb47550485b"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-9","type":"checkbox","name":"checkbox-9","data-name":"Checkbox 9","required":false,"checked":true},"xattr":[{"name":"data-ms-value","value":"Wood "}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 9"},"inputType":"custom"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82c","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc82d"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82d","text":true,"v":"Wood"},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82e","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc82f","d9bd2dfc-8cb5-e426-bc95-28e1e16fc830"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82f","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Metal "}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc830","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc831"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc831","text":true,"v":"Metal"},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc832","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc833","d9bd2dfc-8cb5-e426-bc95-28e1e16fc834"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc833","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Plastic "}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc834","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc835"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc835","text":true,"v":"Plastic"},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc836","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc837","d9bd2dfc-8cb5-e426-bc95-28e1e16fc838"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc837","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Polycarbonate"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc838","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc839"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc839","text":true,"v":"Polycarbonate"},{"_id":"c179dbb4-5496-0188-ff57-bf0e445eb374","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["c179dbb4-5496-0188-ff57-bf0e445eb375","c179dbb4-5496-0188-ff57-bf0e445eb376"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"c179dbb4-5496-0188-ff57-bf0e445eb375","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Some Rocks"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"c179dbb4-5496-0188-ff57-bf0e445eb376","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["c179dbb4-5496-0188-ff57-bf0e445eb377"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"c179dbb4-5496-0188-ff57-bf0e445eb377","text":true,"v":"Some Rocks"},{"_id":"7d25bef3-9413-b0b8-f869-1f61277580b9","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["7d25bef3-9413-b0b8-f869-1f61277580ba","7d25bef3-9413-b0b8-f869-1f61277580bb"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"7d25bef3-9413-b0b8-f869-1f61277580ba","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Melted Candy"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"7d25bef3-9413-b0b8-f869-1f61277580bb","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["7d25bef3-9413-b0b8-f869-1f61277580bc"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"7d25bef3-9413-b0b8-f869-1f61277580bc","text":true,"v":"Melted Candy"},{"_id":"d7c35732-f2c1-ba3d-de58-e06fb3ceb91e","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["d7c35732-f2c1-ba3d-de58-e06fb3ceb91f","d7c35732-f2c1-ba3d-de58-e06fb3ceb920"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"d7c35732-f2c1-ba3d-de58-e06fb3ceb91f","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Leather "}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"d7c35732-f2c1-ba3d-de58-e06fb3ceb920","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["d7c35732-f2c1-ba3d-de58-e06fb3ceb921"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"d7c35732-f2c1-ba3d-de58-e06fb3ceb921","text":true,"v":"Leather"}],"styles":[{"_id":"6b8902a2-181b-b570-6fc0-60668a93022f","fake":false,"type":"class","name":"checkbox-label","namespace":"","comb":"","styleLess":"margin-bottom: 0.5rem; color: hsla(225, 0.00%, 0.00%, 1.00); font-size: 0.9rem; font-weight: 600;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"6b8902a2-181b-b570-6fc0-60668a930241","fake":false,"type":"class","name":"text-color-grey","namespace":"","comb":"","styleLess":"opacity: 0.7;","variants":{},"children":[],"selector":null},{"_id":"5eb75594-6c3e-db31-b9ee-097ba00a8425","fake":false,"type":"class","name":"multi-select-wrap","namespace":"","comb":"","styleLess":"display: flex; overflow: scroll; width: 100%; max-height: 150px; padding-top: 0.5rem; padding-right: 0.5rem; padding-bottom: 0.25rem; padding-left: 0.5rem; flex-wrap: wrap; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(232.8, 21.37%, 77.06%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(232.8, 21.37%, 77.06%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(232.8, 21.37%, 77.06%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(232.8, 21.37%, 77.06%, 1.00); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: rgba(0, 0, 0, 0.02);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"cdef046e-6bc9-26a7-b100-40c1e8882b09","fake":false,"type":"class","name":"checkbox-field-b","namespace":"","comb":"","styleLess":"position: relative; z-index: 2; display: flex; width: 100%; margin-bottom: 0.25rem; padding-top: 0.3rem; padding-bottom: 0.2rem; padding-left: 0.7rem; align-items: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; line-height: 1.4em;","variants":{"main_hover":{"styleLess":"position: relative; border-top-color: hsla(244.5378151260504, 100.00%, 46.67%, 1.00); border-right-color: hsla(244.5378151260504, 100.00%, 46.67%, 1.00); border-bottom-color: hsla(244.5378151260504, 100.00%, 46.67%, 1.00); border-left-color: hsla(244.5378151260504, 100.00%, 46.67%, 1.00); box-shadow: 0 20px 30px -10px hsla(0, 0.00%, 0.00%, 0.13);"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"31c90483-67e8-0f87-5113-5c4dfc1c6135","fake":false,"type":"class","name":"checkbox_button-b","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; z-index: 3; display: inline-block; width: 100%; height: 100%; margin-top: 0px; margin-left: 0px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; cursor: pointer;","variants":{"main_redirected-checked":{"styleLess":"width: 100%; height: 100%; border-top-width: 2px; border-top-color: hsla(147.22222222222223, 65.06%, 32.55%, 1.00); border-right-width: 2px; border-right-color: hsla(147.22222222222223, 65.06%, 32.55%, 1.00); border-bottom-width: 2px; border-bottom-color: hsla(147.22222222222223, 65.06%, 32.55%, 1.00); border-left-width: 2px; border-left-color: hsla(147.22222222222223, 65.06%, 32.55%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-color: hsla(147.22222222222223, 65.06%, 32.55%, 0.05); background-image: @img_63570cb1b1dd1607479f1327; background-position: 90% 50%; background-size: 14px; background-repeat: no-repeat;"},"main_hover":{"styleLess":"background-color: hsla(225, 0.00%, 0.00%, 0.05);"}},"children":["ef87cee6-e256-7d29-0598-deb47550485b"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"ef87cee6-e256-7d29-0598-deb47550485b","fake":false,"type":"class","name":"no-x","namespace":"","comb":"&","styleLess":"","variants":{"main_redirected-checked":{"styleLess":"background-image: none /* @img_63570cb1b1dd1607479f1327 */; background-position: 0px 0px /* 90% 50% */; background-size: auto /* 14px */; background-repeat: repeat /* no-repeat */;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9d7afcd0-9551-4cec-530e-de1e593ce0d2","fake":false,"type":"class","name":"custom-checkbox-label-b","namespace":"","comb":"","styleLess":"position: relative; z-index: 3; width: 100%; color: hsla(225, 0.00%, 0.00%, 1.00); font-weight: 600; mix-blend-mode: normal;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/635689ca57c4a5be05d92b4d/63570cb1b1dd1607479f1327_noun_Close_3610311.svg","siteId":"635689ca57c4a5be05d92b4d","isHD":false,"fileName":"63570cb1b1dd1607479f1327_noun_Close_3610311.svg","createdOn":"2022-10-24T22:07:45.460Z","origFileName":"noun_Close_3610311.svg","fileHash":"be9e4811a472e18505cbd30538757206","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/635689ca57c4a5be05d92b4d/63570cb1b1dd1607479f1327_noun_Close_3610311.svg","thumbUrl":"https://cdn.prod.website-files.com/635689ca57c4a5be05d92b4d/63570cb1b1dd1607479f1327_noun_Close_3610311.svg","_id":"63570cb1b1dd1607479f1327","updatedOn":"2022-10-24T22:07:45.460Z","fileSize":705}],"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":"285d23f8-1ae0-4539-2442-38c0a07d45a0","type":"Block","tag":"div","classes":[],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc81f","d9bd2dfc-8cb5-e426-bc95-28e1e16fc829"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc81f","type":"Block","tag":"div","classes":["6b8902a2-181b-b570-6fc0-60668a93022f"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc820","d9bd2dfc-8cb5-e426-bc95-28e1e16fc821"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc820","text":true,"v":"Custom Multi-select using checkboxes"},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc821","type":"Span","tag":"span","classes":["6b8902a2-181b-b570-6fc0-60668a930241"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc822"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc822","text":true,"v":""},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc829","type":"Block","tag":"div","classes":["5eb75594-6c3e-db31-b9ee-097ba00a8425"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc82a","d9bd2dfc-8cb5-e426-bc95-28e1e16fc82e","d9bd2dfc-8cb5-e426-bc95-28e1e16fc832","d9bd2dfc-8cb5-e426-bc95-28e1e16fc836","c179dbb4-5496-0188-ff57-bf0e445eb374","7d25bef3-9413-b0b8-f869-1f61277580b9","d7c35732-f2c1-ba3d-de58-e06fb3ceb91e"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-member","value":"more"}],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82a","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc82b","d9bd2dfc-8cb5-e426-bc95-28e1e16fc82c"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82b","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135","ef87cee6-e256-7d29-0598-deb47550485b"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-9","type":"checkbox","name":"checkbox-9","data-name":"Checkbox 9","required":false,"checked":true},"xattr":[{"name":"data-ms-value","value":"Wood "}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 9"},"inputType":"custom"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82c","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc82d"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82d","text":true,"v":"Wood"},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82e","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc82f","d9bd2dfc-8cb5-e426-bc95-28e1e16fc830"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc82f","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Metal "}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc830","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc831"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc831","text":true,"v":"Metal"},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc832","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc833","d9bd2dfc-8cb5-e426-bc95-28e1e16fc834"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc833","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Plastic "}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc834","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc835"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc835","text":true,"v":"Plastic"},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc836","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc837","d9bd2dfc-8cb5-e426-bc95-28e1e16fc838"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc837","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Polycarbonate"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc838","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["d9bd2dfc-8cb5-e426-bc95-28e1e16fc839"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"d9bd2dfc-8cb5-e426-bc95-28e1e16fc839","text":true,"v":"Polycarbonate"},{"_id":"c179dbb4-5496-0188-ff57-bf0e445eb374","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["c179dbb4-5496-0188-ff57-bf0e445eb375","c179dbb4-5496-0188-ff57-bf0e445eb376"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"c179dbb4-5496-0188-ff57-bf0e445eb375","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Some Rocks"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"c179dbb4-5496-0188-ff57-bf0e445eb376","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["c179dbb4-5496-0188-ff57-bf0e445eb377"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"c179dbb4-5496-0188-ff57-bf0e445eb377","text":true,"v":"Some Rocks"},{"_id":"7d25bef3-9413-b0b8-f869-1f61277580b9","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["7d25bef3-9413-b0b8-f869-1f61277580ba","7d25bef3-9413-b0b8-f869-1f61277580bb"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"7d25bef3-9413-b0b8-f869-1f61277580ba","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Melted Candy"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"7d25bef3-9413-b0b8-f869-1f61277580bb","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["7d25bef3-9413-b0b8-f869-1f61277580bc"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"7d25bef3-9413-b0b8-f869-1f61277580bc","text":true,"v":"Melted Candy"},{"_id":"d7c35732-f2c1-ba3d-de58-e06fb3ceb91e","type":"FormCheckboxWrapper","tag":"div","classes":["cdef046e-6bc9-26a7-b100-40c1e8882b09"],"children":["d7c35732-f2c1-ba3d-de58-e06fb3ceb91f","d7c35732-f2c1-ba3d-de58-e06fb3ceb920"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox"}}},{"_id":"d7c35732-f2c1-ba3d-de58-e06fb3ceb91f","type":"FormCheckboxInput","tag":"input","classes":["31c90483-67e8-0f87-5113-5c4dfc1c6135"],"children":[],"data":{"displayName":"","attr":{"id":"checkbox-8","type":"checkbox","name":"checkbox-8","data-name":"Checkbox 8","required":false,"checked":false},"xattr":[{"name":"data-ms-value","value":"Leather "}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-input","name":"Checkbox 8"},"inputType":"custom"}},{"_id":"d7c35732-f2c1-ba3d-de58-e06fb3ceb920","type":"FormInlineLabel","tag":"label","classes":["9d7afcd0-9551-4cec-530e-de1e593ce0d2"],"children":["d7c35732-f2c1-ba3d-de58-e06fb3ceb921"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"checkbox-label"}}},{"_id":"d7c35732-f2c1-ba3d-de58-e06fb3ceb921","text":true,"v":"Leather"}],"styles":[{"_id":"6b8902a2-181b-b570-6fc0-60668a93022f","fake":false,"type":"class","name":"checkbox-label","namespace":"","comb":"","styleLess":"margin-bottom: 0.5rem; color: hsla(225, 0.00%, 0.00%, 1.00); font-size: 0.9rem; font-weight: 600;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"6b8902a2-181b-b570-6fc0-60668a930241","fake":false,"type":"class","name":"text-color-grey","namespace":"","comb":"","styleLess":"opacity: 0.7;","variants":{},"children":[],"selector":null},{"_id":"5eb75594-6c3e-db31-b9ee-097ba00a8425","fake":false,"type":"class","name":"multi-select-wrap","namespace":"","comb":"","styleLess":"display: flex; overflow: scroll; width: 100%; max-height: 150px; padding-top: 0.5rem; padding-right: 0.5rem; padding-bottom: 0.25rem; padding-left: 0.5rem; flex-wrap: wrap; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(232.8, 21.37%, 77.06%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(232.8, 21.37%, 77.06%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(232.8, 21.37%, 77.06%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(232.8, 21.37%, 77.06%, 1.00); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: rgba(0, 0, 0, 0.02);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"cdef046e-6bc9-26a7-b100-40c1e8882b09","fake":false,"type":"class","name":"checkbox-field-b","namespace":"","comb":"","styleLess":"position: relative; z-index: 2; display: flex; width: 100%; margin-bottom: 0.25rem; padding-top: 0.3rem; padding-bottom: 0.2rem; padding-left: 0.7rem; align-items: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; line-height: 1.4em;","variants":{"main_hover":{"styleLess":"position: relative; border-top-color: hsla(244.5378151260504, 100.00%, 46.67%, 1.00); border-right-color: hsla(244.5378151260504, 100.00%, 46.67%, 1.00); border-bottom-color: hsla(244.5378151260504, 100.00%, 46.67%, 1.00); border-left-color: hsla(244.5378151260504, 100.00%, 46.67%, 1.00); box-shadow: 0 20px 30px -10px hsla(0, 0.00%, 0.00%, 0.13);"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"31c90483-67e8-0f87-5113-5c4dfc1c6135","fake":false,"type":"class","name":"checkbox_button-b","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; z-index: 3; display: inline-block; width: 100%; height: 100%; margin-top: 0px; margin-left: 0px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; cursor: pointer;","variants":{"main_redirected-checked":{"styleLess":"width: 100%; height: 100%; border-top-width: 2px; border-top-color: hsla(147.22222222222223, 65.06%, 32.55%, 1.00); border-right-width: 2px; border-right-color: hsla(147.22222222222223, 65.06%, 32.55%, 1.00); border-bottom-width: 2px; border-bottom-color: hsla(147.22222222222223, 65.06%, 32.55%, 1.00); border-left-width: 2px; border-left-color: hsla(147.22222222222223, 65.06%, 32.55%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-color: hsla(147.22222222222223, 65.06%, 32.55%, 0.05); background-image: @img_63570cb1b1dd1607479f1327; background-position: 90% 50%; background-size: 14px; background-repeat: no-repeat;"},"main_hover":{"styleLess":"background-color: hsla(225, 0.00%, 0.00%, 0.05);"}},"children":["ef87cee6-e256-7d29-0598-deb47550485b"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"ef87cee6-e256-7d29-0598-deb47550485b","fake":false,"type":"class","name":"no-x","namespace":"","comb":"&","styleLess":"","variants":{"main_redirected-checked":{"styleLess":"background-image: none /* @img_63570cb1b1dd1607479f1327 */; background-position: 0px 0px /* 90% 50% */; background-size: auto /* 14px */; background-repeat: repeat /* no-repeat */;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9d7afcd0-9551-4cec-530e-de1e593ce0d2","fake":false,"type":"class","name":"custom-checkbox-label-b","namespace":"","comb":"","styleLess":"position: relative; z-index: 3; width: 100%; color: hsla(225, 0.00%, 0.00%, 1.00); font-weight: 600; mix-blend-mode: normal;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/635689ca57c4a5be05d92b4d/63570cb1b1dd1607479f1327_noun_Close_3610311.svg","siteId":"635689ca57c4a5be05d92b4d","isHD":false,"fileName":"63570cb1b1dd1607479f1327_noun_Close_3610311.svg","createdOn":"2022-10-24T22:07:45.460Z","origFileName":"noun_Close_3610311.svg","fileHash":"be9e4811a472e18505cbd30538757206","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/635689ca57c4a5be05d92b4d/63570cb1b1dd1607479f1327_noun_Close_3610311.svg","thumbUrl":"https://cdn.prod.website-files.com/635689ca57c4a5be05d92b4d/63570cb1b1dd1607479f1327_noun_Close_3610311.svg","_id":"63570cb1b1dd1607479f1327","updatedOn":"2022-10-24T22:07:45.460Z","fileSize":705}],"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 Custom Multi-Select Input is a versatile form component that allows users to select multiple options using checkboxes. It is designed to enhance user interaction and streamline data collection.
Key Features:
- Supports multiple selections with checkboxes
- Customizable styles for branding
- Responsive design for various devices
- Includes options for materials like Wood, Metal, Plastic, and more
Design Elements:
- Flexbox layout for easy alignment and spacing
- Soft color palette with a light background and contrasting text
- Rounded corners and subtle borders for a modern look
- Hover effects for enhanced user experience
Potential Use Cases:
- E-commerce sites for product customization options
- Surveys and feedback forms requiring multiple responses
- Event registration forms with selectable activities
- Real estate listings for selecting property features
Conclusion: The Custom Multi-Select Input is a highly adaptable component that can improve user engagement across various applications, making it an excellent choice for designers and developers looking to enhance their forms.