Loading Component...

Loading

More Components

View All
Oops! Something went wrong while submitting the form.
Radio Toggle Buttons
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e1b","type":"Block","tag":"div","classes":[],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e1c","9645aec2-1b02-bd81-66b4-2dfb5aef3e1e","9645aec2-1b02-bd81-66b4-2dfb5aef3e20","9645aec2-1b02-bd81-66b4-2dfb5aef3e21","9645aec2-1b02-bd81-66b4-2dfb5aef3e27","9645aec2-1b02-bd81-66b4-2dfb5aef3e2d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e1c","type":"FormBlockLabel","tag":"label","classes":["2657aadb-6326-6737-fabb-4243fa3dff9f"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e1d"],"data":{"form":{"type":"label"},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"email-7","id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e1d","text":true,"v":"Radio Button Toggles"},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e1e","type":"Block","tag":"div","classes":["73f529f2-aa61-4baf-340f-708f676f0c22","9712caa0-24c0-8432-1d15-a2edc5dae14c"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e1f"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e1f","text":true,"v":"Only one option can be selected at a time."},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e20","type":"Block","tag":"div","classes":["3b998372-f799-dc18-eb99-4516eebd4411"],"children":[],"data":{"text":false,"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e21","type":"FormRadioWrapper","tag":"div","classes":["fe1035bb-067f-627c-4192-b3631b3f0d91"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e22","9645aec2-1b02-bd81-66b4-2dfb5aef3e23","9645aec2-1b02-bd81-66b4-2dfb5aef3e25","9645aec2-1b02-bd81-66b4-2dfb5aef3e26"],"data":{"form":{"type":"radio"},"search":{"exclude":false},"xattr":[{"name":"checked","value":"checked"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e22","type":"FormRadioInput","tag":"input","classes":["516eeb25-c7cc-c04d-0926-708fe273e2d2"],"children":[],"data":{"form":{"type":"radio-input","name":"Toggles"},"inputType":"default","xattr":[{"name":"checked","value":"checked"}],"attr":{"id":"Option-1","type":"radio","name":"Toggles","value":"Option 1","data-name":"Toggles","required":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e23","type":"FormInlineLabel","tag":"label","classes":["30134ef7-a861-ac88-632b-76380894f4e0"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e24"],"data":{"form":{"type":"radio-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e24","text":true,"v":"Option 1"},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e25","type":"Block","tag":"div","classes":["a75e84b7-f1b3-5fc7-37dc-47cd856a067c"],"children":[],"data":{"text":false,"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e26","type":"Block","tag":"div","classes":["e79d8544-6ad6-948d-95a1-fde7449c5f0f"],"children":[],"data":{"text":false,"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e27","type":"FormRadioWrapper","tag":"div","classes":["fe1035bb-067f-627c-4192-b3631b3f0d91"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e28","9645aec2-1b02-bd81-66b4-2dfb5aef3e29","9645aec2-1b02-bd81-66b4-2dfb5aef3e2b","9645aec2-1b02-bd81-66b4-2dfb5aef3e2c"],"data":{"form":{"type":"radio"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e28","type":"FormRadioInput","tag":"input","classes":["516eeb25-c7cc-c04d-0926-708fe273e2d2"],"children":[],"data":{"form":{"type":"radio-input","name":"Toggles"},"inputType":"default","attr":{"id":"Option-2","type":"radio","name":"Toggles","value":"Option 2","data-name":"Toggles","required":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e29","type":"FormInlineLabel","tag":"label","classes":["30134ef7-a861-ac88-632b-76380894f4e0"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e2a"],"data":{"form":{"type":"radio-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2a","text":true,"v":"Option 2"},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2b","type":"Block","tag":"div","classes":["a75e84b7-f1b3-5fc7-37dc-47cd856a067c"],"children":[],"data":{"text":false,"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2c","type":"Block","tag":"div","classes":["e79d8544-6ad6-948d-95a1-fde7449c5f0f"],"children":[],"data":{"text":false,"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2d","type":"Block","tag":"div","classes":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d","a2fad997-c977-ccb1-af6d-620c77ce9676"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e2e","9645aec2-1b02-bd81-66b4-2dfb5aef3e32"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2e","type":"Link","tag":"a","classes":["0d41ce05-dcef-7195-d116-e65f5c3982f0"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e2f","9645aec2-1b02-bd81-66b4-2dfb5aef3e31"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2f","type":"Block","tag":"div","classes":[],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e30"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e30","text":true,"v":"☝️ How this works"},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e31","type":"HtmlEmbed","tag":"div","classes":["22325e1f-926a-ca9b-a725-087976f3b6ff"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"32px\" viewBox=\"0 0 24 24\" width=\"32px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"32px\" viewBox=\"0 0 24 24\" width=\"32px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e32","type":"Block","tag":"div","classes":["d4047300-ace7-5a9f-b875-60fe8e0bbcf5"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e33","9645aec2-1b02-bd81-66b4-2dfb5aef3e34"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e33","type":"HtmlEmbed","tag":"div","classes":["f7d4ff22-d4d6-a108-0db1-f3a7c05e1d6d"],"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"}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e34","type":"Paragraph","tag":"p","classes":[],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e35"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e35","text":true,"v":"These are mostly Webflow elements which are lightly styled with custom CSS. I tried to keep as much in Webflow as possible."}],"styles":[{"_id":"fe1035bb-067f-627c-4192-b3631b3f0d91","fake":false,"type":"class","name":"MS Toggle Wrap","namespace":"","comb":"","styleLess":"position: relative; width: 50px; height: 34px; margin-bottom: 15px;","variants":{},"children":["264bdcba-59e5-60d2-9141-132d08ea3215","f3ac6845-1914-cd73-3399-ef9d121db0dc"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"e79d8544-6ad6-948d-95a1-fde7449c5f0f","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":["8cdacaf2-c46c-d20d-458e-88e001c03463","fff36a57-75a5-54be-38d3-076c9bd00608"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"516eeb25-c7cc-c04d-0926-708fe273e2d2","fake":false,"type":"class","name":"ms-toggle-checkbox","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"30134ef7-a861-ac88-632b-76380894f4e0","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":["b295f11d-71eb-f24d-5484-e04f1348422a","662ebdf8-3727-60b1-22ce-2456fb5f637e","32dbb1a8-2842-5f43-c31f-178b20bc2fcd"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2657aadb-6326-6737-fabb-4243fa3dff9f","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":["d7ffcb3f-9002-7376-c22d-56704364b904","ce4843a6-c93b-e110-6f64-9819d94aadc2","4d1aaa9e-21c5-a440-a9be-0811c5edf335","11b8e98c-5ab6-f77d-7db1-da0f96642410","80ffcf25-c38b-1ca7-865a-74cc7ed8ce63"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"f7d4ff22-d4d6-a108-0db1-f3a7c05e1d6d","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},{"_id":"a2fad997-c977-ccb1-af6d-620c77ce9676","fake":false,"type":"class","name":"for-radio","namespace":"","comb":"&","styleLess":"margin-top: 10px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"d4047300-ace7-5a9f-b875-60fe8e0bbcf5","fake":false,"type":"class","name":"ms-drawer-contain","namespace":"","comb":"","styleLess":"padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 88.00%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"a75e84b7-f1b3-5fc7-37dc-47cd856a067c","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":["b55bb357-544b-daa1-93ca-26be8946f535"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"22325e1f-926a-ca9b-a725-087976f3b6ff","fake":false,"type":"class","name":"ms-dropdown-svg","namespace":"","comb":"","styleLess":"display: flex; width: 30px; height: 20px; justify-content: center; align-items: center; opacity: 0.5;","variants":{},"children":["fc731220-5690-450f-48bc-4d4d733a22b0"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"93f5ef5d-ee26-955f-0b8a-c38727cfea5d","fake":false,"type":"class","name":"ms-how-drawer","namespace":"","comb":"","styleLess":"overflow: hidden; width: 100%; margin-top: -10px; margin-bottom: 20px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; background-color: hsla(0, 0.00%, 97.16%, 1.00);","variants":{},"children":["a2fad997-c977-ccb1-af6d-620c77ce9676"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"0d41ce05-dcef-7195-d116-e65f5c3982f0","fake":false,"type":"class","name":"ms-drawer-top","namespace":"","comb":"","styleLess":"display: flex; padding-top: 11px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; justify-content: space-between; align-items: center; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; color: hsla(237, 47.06%, 13.06%, 1.00); font-weight: 400;","variants":{"main_hover":{"styleLess":"background-color: hsla(235, 0.00%, 92.00%, 1.00);"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"73f529f2-aa61-4baf-340f-708f676f0c22","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":["9712caa0-24c0-8432-1d15-a2edc5dae14c"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"3b998372-f799-dc18-eb99-4516eebd4411","fake":false,"type":"class","name":"ms-space","namespace":"","comb":"","styleLess":"width: 10px; height: 10px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9712caa0-24c0-8432-1d15-a2edc5dae14c","fake":false,"type":"class","name":"less-margin","namespace":"","comb":"&","styleLess":"margin-top: -4px; margin-bottom: 4px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-6","interactionTypeId":"MOUSE_CLICK_INTERACTION","eventIds":["e-8","e-9"],"target":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","createdOn":1680722535923}],"events":[{"id":"e-8","name":"","animationType":"custom","eventTypeId":"MOUSE_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-5","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-9"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]},"targets":[{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1680722535924},{"id":"e-9","name":"","animationType":"custom","eventTypeId":"MOUSE_SECOND_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-6","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-8"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]},"targets":[{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1680722535924}],"actionLists":[{"id":"a-5","title":"MS Drawer Open","actionItemGroups":[{"actionItems":[{"id":"a-5-n","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|0b5ad877-e784-a7f4-7add-8a59911ad493","appliesTo":"ELEMENT_CLASS","styleBlockIds":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d"],"useEventTarget":"PARENT","boundaryMode":false},"heightValue":41,"widthUnit":"px","heightUnit":"px","locked":false},"instant":false}]},{"actionItems":[{"id":"a-5-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|0b5ad877-e784-a7f4-7add-8a59911ad493","appliesTo":"ELEMENT_CLASS","styleBlockIds":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d"],"useEventTarget":"PARENT","boundaryMode":false},"widthUnit":"px","heightUnit":"AUTO","locked":false},"instant":false},{"id":"a-5-n-3","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|f71a2c90-7e45-8bca-764e-22f54034c6d1","appliesTo":"ELEMENT_CLASS","styleBlockIds":["22325e1f-926a-ca9b-a725-087976f3b6ff"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":-180,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1680722366537},{"id":"a-6","title":"MS Drawer Close","actionItemGroups":[{"actionItems":[{"id":"a-6-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|0b5ad877-e784-a7f4-7add-8a59911ad493","appliesTo":"ELEMENT_CLASS","styleBlockIds":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d"],"useEventTarget":"PARENT","boundaryMode":false},"heightValue":42,"widthUnit":"px","heightUnit":"px","locked":false},"instant":false},{"id":"a-6-n-3","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|f71a2c90-7e45-8bca-764e-22f54034c6d1","appliesTo":"ELEMENT_CLASS","styleBlockIds":["22325e1f-926a-ca9b-a725-087976f3b6ff"],"useEventTarget":"CHILDREN","boundaryMode":false},"yValue":null,"zValue":0,"xUnit":"DEG","yUnit":"deg","zUnit":"deg"},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1680722366537}]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e1b","type":"Block","tag":"div","classes":[],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e1c","9645aec2-1b02-bd81-66b4-2dfb5aef3e1e","9645aec2-1b02-bd81-66b4-2dfb5aef3e20","9645aec2-1b02-bd81-66b4-2dfb5aef3e21","9645aec2-1b02-bd81-66b4-2dfb5aef3e27","9645aec2-1b02-bd81-66b4-2dfb5aef3e2d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e1c","type":"FormBlockLabel","tag":"label","classes":["2657aadb-6326-6737-fabb-4243fa3dff9f"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e1d"],"data":{"form":{"type":"label"},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"email-7","id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e1d","text":true,"v":"Radio Button Toggles"},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e1e","type":"Block","tag":"div","classes":["73f529f2-aa61-4baf-340f-708f676f0c22","9712caa0-24c0-8432-1d15-a2edc5dae14c"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e1f"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e1f","text":true,"v":"Only one option can be selected at a time."},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e20","type":"Block","tag":"div","classes":["3b998372-f799-dc18-eb99-4516eebd4411"],"children":[],"data":{"text":false,"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e21","type":"FormRadioWrapper","tag":"div","classes":["fe1035bb-067f-627c-4192-b3631b3f0d91"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e22","9645aec2-1b02-bd81-66b4-2dfb5aef3e23","9645aec2-1b02-bd81-66b4-2dfb5aef3e25","9645aec2-1b02-bd81-66b4-2dfb5aef3e26"],"data":{"form":{"type":"radio"},"search":{"exclude":false},"xattr":[{"name":"checked","value":"checked"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e22","type":"FormRadioInput","tag":"input","classes":["516eeb25-c7cc-c04d-0926-708fe273e2d2"],"children":[],"data":{"form":{"type":"radio-input","name":"Toggles"},"inputType":"default","xattr":[{"name":"checked","value":"checked"}],"attr":{"id":"Option-1","type":"radio","name":"Toggles","value":"Option 1","data-name":"Toggles","required":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e23","type":"FormInlineLabel","tag":"label","classes":["30134ef7-a861-ac88-632b-76380894f4e0"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e24"],"data":{"form":{"type":"radio-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e24","text":true,"v":"Option 1"},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e25","type":"Block","tag":"div","classes":["a75e84b7-f1b3-5fc7-37dc-47cd856a067c"],"children":[],"data":{"text":false,"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e26","type":"Block","tag":"div","classes":["e79d8544-6ad6-948d-95a1-fde7449c5f0f"],"children":[],"data":{"text":false,"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e27","type":"FormRadioWrapper","tag":"div","classes":["fe1035bb-067f-627c-4192-b3631b3f0d91"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e28","9645aec2-1b02-bd81-66b4-2dfb5aef3e29","9645aec2-1b02-bd81-66b4-2dfb5aef3e2b","9645aec2-1b02-bd81-66b4-2dfb5aef3e2c"],"data":{"form":{"type":"radio"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e28","type":"FormRadioInput","tag":"input","classes":["516eeb25-c7cc-c04d-0926-708fe273e2d2"],"children":[],"data":{"form":{"type":"radio-input","name":"Toggles"},"inputType":"default","attr":{"id":"Option-2","type":"radio","name":"Toggles","value":"Option 2","data-name":"Toggles","required":false}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e29","type":"FormInlineLabel","tag":"label","classes":["30134ef7-a861-ac88-632b-76380894f4e0"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e2a"],"data":{"form":{"type":"radio-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2a","text":true,"v":"Option 2"},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2b","type":"Block","tag":"div","classes":["a75e84b7-f1b3-5fc7-37dc-47cd856a067c"],"children":[],"data":{"text":false,"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2c","type":"Block","tag":"div","classes":["e79d8544-6ad6-948d-95a1-fde7449c5f0f"],"children":[],"data":{"text":false,"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2d","type":"Block","tag":"div","classes":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d","a2fad997-c977-ccb1-af6d-620c77ce9676"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e2e","9645aec2-1b02-bd81-66b4-2dfb5aef3e32"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2e","type":"Link","tag":"a","classes":["0d41ce05-dcef-7195-d116-e65f5c3982f0"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e2f","9645aec2-1b02-bd81-66b4-2dfb5aef3e31"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e2f","type":"Block","tag":"div","classes":[],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e30"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e30","text":true,"v":"☝️ How this works"},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e31","type":"HtmlEmbed","tag":"div","classes":["22325e1f-926a-ca9b-a725-087976f3b6ff"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"32px\" viewBox=\"0 0 24 24\" width=\"32px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"32px\" viewBox=\"0 0 24 24\" width=\"32px\" fill=\"currentColor\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z\"/></svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e32","type":"Block","tag":"div","classes":["d4047300-ace7-5a9f-b875-60fe8e0bbcf5"],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e33","9645aec2-1b02-bd81-66b4-2dfb5aef3e34"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e33","type":"HtmlEmbed","tag":"div","classes":["f7d4ff22-d4d6-a108-0db1-f3a7c05e1d6d"],"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"}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e34","type":"Paragraph","tag":"p","classes":[],"children":["9645aec2-1b02-bd81-66b4-2dfb5aef3e35"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"9645aec2-1b02-bd81-66b4-2dfb5aef3e35","text":true,"v":"These are mostly Webflow elements which are lightly styled with custom CSS. I tried to keep as much in Webflow as possible."}],"styles":[{"_id":"fe1035bb-067f-627c-4192-b3631b3f0d91","fake":false,"type":"class","name":"MS Toggle Wrap","namespace":"","comb":"","styleLess":"position: relative; width: 50px; height: 34px; margin-bottom: 15px;","variants":{},"children":["264bdcba-59e5-60d2-9141-132d08ea3215","f3ac6845-1914-cd73-3399-ef9d121db0dc"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"e79d8544-6ad6-948d-95a1-fde7449c5f0f","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":["8cdacaf2-c46c-d20d-458e-88e001c03463","fff36a57-75a5-54be-38d3-076c9bd00608"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"516eeb25-c7cc-c04d-0926-708fe273e2d2","fake":false,"type":"class","name":"ms-toggle-checkbox","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"30134ef7-a861-ac88-632b-76380894f4e0","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":["b295f11d-71eb-f24d-5484-e04f1348422a","662ebdf8-3727-60b1-22ce-2456fb5f637e","32dbb1a8-2842-5f43-c31f-178b20bc2fcd"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"2657aadb-6326-6737-fabb-4243fa3dff9f","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":["d7ffcb3f-9002-7376-c22d-56704364b904","ce4843a6-c93b-e110-6f64-9819d94aadc2","4d1aaa9e-21c5-a440-a9be-0811c5edf335","11b8e98c-5ab6-f77d-7db1-da0f96642410","80ffcf25-c38b-1ca7-865a-74cc7ed8ce63"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"f7d4ff22-d4d6-a108-0db1-f3a7c05e1d6d","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},{"_id":"a2fad997-c977-ccb1-af6d-620c77ce9676","fake":false,"type":"class","name":"for-radio","namespace":"","comb":"&","styleLess":"margin-top: 10px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"d4047300-ace7-5a9f-b875-60fe8e0bbcf5","fake":false,"type":"class","name":"ms-drawer-contain","namespace":"","comb":"","styleLess":"padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 88.00%, 1.00);","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"a75e84b7-f1b3-5fc7-37dc-47cd856a067c","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":["b55bb357-544b-daa1-93ca-26be8946f535"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"22325e1f-926a-ca9b-a725-087976f3b6ff","fake":false,"type":"class","name":"ms-dropdown-svg","namespace":"","comb":"","styleLess":"display: flex; width: 30px; height: 20px; justify-content: center; align-items: center; opacity: 0.5;","variants":{},"children":["fc731220-5690-450f-48bc-4d4d733a22b0"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"93f5ef5d-ee26-955f-0b8a-c38727cfea5d","fake":false,"type":"class","name":"ms-how-drawer","namespace":"","comb":"","styleLess":"overflow: hidden; width: 100%; margin-top: -10px; margin-bottom: 20px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; background-color: hsla(0, 0.00%, 97.16%, 1.00);","variants":{},"children":["a2fad997-c977-ccb1-af6d-620c77ce9676"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"0d41ce05-dcef-7195-d116-e65f5c3982f0","fake":false,"type":"class","name":"ms-drawer-top","namespace":"","comb":"","styleLess":"display: flex; padding-top: 11px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; justify-content: space-between; align-items: center; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; color: hsla(237, 47.06%, 13.06%, 1.00); font-weight: 400;","variants":{"main_hover":{"styleLess":"background-color: hsla(235, 0.00%, 92.00%, 1.00);"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"73f529f2-aa61-4baf-340f-708f676f0c22","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":["9712caa0-24c0-8432-1d15-a2edc5dae14c"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"3b998372-f799-dc18-eb99-4516eebd4411","fake":false,"type":"class","name":"ms-space","namespace":"","comb":"","styleLess":"width: 10px; height: 10px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"9712caa0-24c0-8432-1d15-a2edc5dae14c","fake":false,"type":"class","name":"less-margin","namespace":"","comb":"&","styleLess":"margin-top: -4px; margin-bottom: 4px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-6","interactionTypeId":"MOUSE_CLICK_INTERACTION","eventIds":["e-8","e-9"],"target":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","createdOn":1680722535923}],"events":[{"id":"e-8","name":"","animationType":"custom","eventTypeId":"MOUSE_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-5","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-9"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]},"targets":[{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1680722535924},{"id":"e-9","name":"","animationType":"custom","eventTypeId":"MOUSE_SECOND_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-6","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-8"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]},"targets":[{"id":"64204e9f9e7328704b3f1bd5|042a4cbb-a9a8-5288-b24e-a5273a5cc1dd","appliesTo":"CLASS","styleBlockIds":["0d41ce05-dcef-7195-d116-e65f5c3982f0"]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1680722535924}],"actionLists":[{"id":"a-5","title":"MS Drawer Open","actionItemGroups":[{"actionItems":[{"id":"a-5-n","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|0b5ad877-e784-a7f4-7add-8a59911ad493","appliesTo":"ELEMENT_CLASS","styleBlockIds":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d"],"useEventTarget":"PARENT","boundaryMode":false},"heightValue":41,"widthUnit":"px","heightUnit":"px","locked":false},"instant":false}]},{"actionItems":[{"id":"a-5-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|0b5ad877-e784-a7f4-7add-8a59911ad493","appliesTo":"ELEMENT_CLASS","styleBlockIds":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d"],"useEventTarget":"PARENT","boundaryMode":false},"widthUnit":"px","heightUnit":"AUTO","locked":false},"instant":false},{"id":"a-5-n-3","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|f71a2c90-7e45-8bca-764e-22f54034c6d1","appliesTo":"ELEMENT_CLASS","styleBlockIds":["22325e1f-926a-ca9b-a725-087976f3b6ff"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":-180,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1680722366537},{"id":"a-6","title":"MS Drawer Close","actionItemGroups":[{"actionItems":[{"id":"a-6-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|0b5ad877-e784-a7f4-7add-8a59911ad493","appliesTo":"ELEMENT_CLASS","styleBlockIds":["93f5ef5d-ee26-955f-0b8a-c38727cfea5d"],"useEventTarget":"PARENT","boundaryMode":false},"heightValue":42,"widthUnit":"px","heightUnit":"px","locked":false},"instant":false},{"id":"a-6-n-3","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"64204e9f9e7328704b3f1bd5|f71a2c90-7e45-8bca-764e-22f54034c6d1","appliesTo":"ELEMENT_CLASS","styleBlockIds":["22325e1f-926a-ca9b-a725-087976f3b6ff"],"useEventTarget":"CHILDREN","boundaryMode":false},"yValue":null,"zValue":0,"xUnit":"DEG","yUnit":"deg","zUnit":"deg"},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1680722366537}]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser not supported. Use
CC Chrome or SS Safari.

About this component

AI Generated

Component Description (Generated by AI)

The Radio Toggle Buttons component allows users to select one option from a set of choices, providing a clear and interactive way to make selections. It is designed with custom CSS for enhanced visual appeal.

Key Features:

  • Single selection functionality
  • Custom CSS styling for enhanced aesthetics
  • Responsive design suitable for various devices
  • Includes help text for user guidance
  • Interactive elements with animations

Design Elements:

  • Modern and clean design
  • Rounded toggle buttons
  • Colorful background with smooth transitions
  • Use of icons for visual cues
  • Lightweight and minimalistic layout

Potential Use Cases:

  • Web applications requiring user input selection
  • Forms for surveys or feedback collection
  • E-commerce sites for product options
  • Interactive quizzes or assessments
  • User settings or preferences configuration

Conclusion: The Radio Toggle Buttons component is versatile and visually appealing, making it an excellent choice for any web project that requires user interaction through option selection.