Back
Checkbox 1
Copy component
Copy component
Upgrade to copy
Join to copy
Lifetime access $249
A custom checkbox component.
Home
Components
Components
Application UI
Checkbox 1
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"9b3bf1db-5521-0304-2860-cfc73edd05bb","type":"Block","tag":"div","classes":["b33ee94e-9d6b-bc3e-d830-40f3f80d6498"],"children":["25c230e9-5324-733a-c8b6-576b985a1a17"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"25c230e9-5324-733a-c8b6-576b985a1a17","type":"Block","tag":"div","classes":["b33ee94e-9d6b-bc3e-d830-40f3f80d6499"],"children":["a8cc63fe-fdf1-0173-c626-a6fcac78f3b0"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a8cc63fe-fdf1-0173-c626-a6fcac78f3b0","type":"Block","tag":"div","classes":["b33ee94e-9d6b-bc3e-d830-40f3f80d649a"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}}],"styles":[{"_id":"b33ee94e-9d6b-bc3e-d830-40f3f80d6498","fake":false,"type":"class","name":"checkbox-1","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"b33ee94e-9d6b-bc3e-d830-40f3f80d6499","fake":false,"type":"class","name":"checkbox-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; 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":"b33ee94e-9d6b-bc3e-d830-40f3f80d649a","fake":false,"type":"class","name":"checkbox-1_check","namespace":"","comb":"","styleLess":"width: 0%; height: 0%; background-color: #f6ad12;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-8","interactionTypeId":"MOUSE_CLICK_INTERACTION","eventIds":["e-15","e-16"],"target":"663e56124a7fbc503bc599a0|25c230e9-5324-733a-c8b6-576b985a1a17","createdOn":1710524238809}],"events":[{"id":"e-15","name":"","animationType":"custom","eventTypeId":"MOUSE_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-9","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-60"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e56124a7fbc503bc599a0|25c230e9-5324-733a-c8b6-576b985a1a17","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e56124a7fbc503bc599a0|25c230e9-5324-733a-c8b6-576b985a1a17","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1710524238811},{"id":"e-16","name":"","animationType":"custom","eventTypeId":"MOUSE_SECOND_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-10","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-59"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e56124a7fbc503bc599a0|25c230e9-5324-733a-c8b6-576b985a1a17","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e56124a7fbc503bc599a0|25c230e9-5324-733a-c8b6-576b985a1a17","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1710524238813}],"actionLists":[{"id":"a-9","title":"Checkbox 1 [SELECTED]","actionItemGroups":[{"actionItems":[{"id":"a-9-n","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"inOutQuad","duration":250,"target":{"nodeId":"663e56124a7fbc503bc599a0|a8cc63fe-fdf1-0173-c626-a6fcac78f3b0","appliesTo":"ELEMENT_CLASS","styleBlockIds":["b33ee94e-9d6b-bc3e-d830-40f3f80d649a"],"useEventTarget":"CHILDREN","boundaryMode":false},"widthValue":100,"heightValue":100,"widthUnit":"%","heightUnit":"%","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1710524202141},{"id":"a-10","title":"Checkbox 1 [DESELECT]","actionItemGroups":[{"actionItems":[{"id":"a-10-n","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"inOutQuad","duration":250,"target":{"nodeId":"663e56124a7fbc503bc599a0|a8cc63fe-fdf1-0173-c626-a6fcac78f3b0","appliesTo":"ELEMENT_CLASS","styleBlockIds":["b33ee94e-9d6b-bc3e-d830-40f3f80d649a"],"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