Back
Radio 1
Copy component
Copy component
Upgrade to copy
Join to copy
Lifetime access $249
A custom radio selection component.
Home
Components
Components
Application UI
Radio 1
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"8312ce7e-152f-1c47-6cf4-208c07b20b67","type":"Block","tag":"div","classes":["a6d0d229-a614-0d19-7f6f-15e9899aae90"],"children":["5e3ce440-c8fe-b5ba-bc16-e93efd4d6cca"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5e3ce440-c8fe-b5ba-bc16-e93efd4d6cca","type":"Block","tag":"div","classes":["a6d0d229-a614-0d19-7f6f-15e9899aae91"],"children":["c25842a6-41b1-3cfd-22f2-3b859264786c"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"c25842a6-41b1-3cfd-22f2-3b859264786c","type":"Block","tag":"div","classes":["a6d0d229-a614-0d19-7f6f-15e9899aae92"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}}],"styles":[{"_id":"a6d0d229-a614-0d19-7f6f-15e9899aae90","fake":false,"type":"class","name":"radio-1","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"a6d0d229-a614-0d19-7f6f-15e9899aae91","fake":false,"type":"class","name":"radio-1_container","namespace":"","comb":"","styleLess":"display: flex; width: 1.25rem; height: 1.25rem; padding-top: 0.125rem; padding-right: 0.125rem; padding-bottom: 0.125rem; padding-left: 0.125rem; justify-content: center; align-items: center; border-top-style: solid; border-top-width: 0.125rem; border-top-color: #0c60f5; border-right-style: solid; border-right-width: 0.125rem; border-right-color: #0c60f5; border-bottom-style: solid; border-bottom-width: 0.125rem; border-bottom-color: #0c60f5; border-left-style: solid; border-left-width: 0.125rem; border-left-color: #0c60f5; border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; border-bottom-left-radius: 1.25rem; border-bottom-right-radius: 1.25rem; transition-property: border-color; transition-duration: 300ms; transition-timing-function: cubic-bezier(.455, .03, .515, .955); cursor: pointer;","variants":{"main_hover":{"styleLess":"border-top-color: #0049ca; border-right-color: #0049ca; border-bottom-color: #0049ca; border-left-color: #0049ca;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"a6d0d229-a614-0d19-7f6f-15e9899aae92","fake":false,"type":"class","name":"radio-1_check","namespace":"","comb":"","styleLess":"width: 0%; height: 0%; border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; border-bottom-left-radius: 1.25rem; border-bottom-right-radius: 1.25rem; background-color: #f6ad12;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-10","interactionTypeId":"MOUSE_CLICK_INTERACTION","eventIds":["e-19","e-20"],"target":"663e56388d7cd6f5131c93f0|5e3ce440-c8fe-b5ba-bc16-e93efd4d6cca","createdOn":1710524238809}],"events":[{"id":"e-19","name":"","animationType":"custom","eventTypeId":"MOUSE_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-13","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-64"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e56388d7cd6f5131c93f0|5e3ce440-c8fe-b5ba-bc16-e93efd4d6cca","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e56388d7cd6f5131c93f0|5e3ce440-c8fe-b5ba-bc16-e93efd4d6cca","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1710524238811},{"id":"e-20","name":"","animationType":"custom","eventTypeId":"MOUSE_SECOND_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-14","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-63"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e56388d7cd6f5131c93f0|5e3ce440-c8fe-b5ba-bc16-e93efd4d6cca","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e56388d7cd6f5131c93f0|5e3ce440-c8fe-b5ba-bc16-e93efd4d6cca","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1710524238813}],"actionLists":[{"id":"a-13","title":"Radio 1 [SELECTED]","actionItemGroups":[{"actionItems":[{"id":"a-13-n","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"inOutQuad","duration":250,"target":{"nodeId":"663e56388d7cd6f5131c93f0|c25842a6-41b1-3cfd-22f2-3b859264786c","appliesTo":"ELEMENT_CLASS","styleBlockIds":["a6d0d229-a614-0d19-7f6f-15e9899aae92"],"useEventTarget":"CHILDREN","boundaryMode":false},"widthValue":100,"heightValue":100,"widthUnit":"%","heightUnit":"%","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1710524202141},{"id":"a-14","title":"Radio 1 [DESELECT]","actionItemGroups":[{"actionItems":[{"id":"a-14-n","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"inOutQuad","duration":250,"target":{"nodeId":"663e56388d7cd6f5131c93f0|c25842a6-41b1-3cfd-22f2-3b859264786c","appliesTo":"ELEMENT_CLASS","styleBlockIds":["a6d0d229-a614-0d19-7f6f-15e9899aae92"],"useEventTarget":"CHILDREN","boundaryMode":false},"widthValue":0,"heightValue":0,"widthUnit":"%","heightUnit":"%","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1710524202141}]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Built by hand with
from