Back
Checkbox 2
Copy component
Copy component
Upgrade to copy
Join to copy
Lifetime access $249
A custom checkbox component with rounded corners.
Home
Components
Components
Application UI
Checkbox 2
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"fe484f83-1af5-303b-ef1d-b13889f2ed79","type":"Block","tag":"div","classes":["70d07650-f1a9-4c43-d1c2-f1383225880b"],"children":["20562205-b4e4-4bcd-6bd3-7aba0ddc3141"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"20562205-b4e4-4bcd-6bd3-7aba0ddc3141","type":"Block","tag":"div","classes":["70d07650-f1a9-4c43-d1c2-f1383225880c"],"children":["414eae8d-894c-7e89-f05c-289beed1c353"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"414eae8d-894c-7e89-f05c-289beed1c353","type":"Block","tag":"div","classes":["70d07650-f1a9-4c43-d1c2-f1383225880d"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}}],"styles":[{"_id":"70d07650-f1a9-4c43-d1c2-f1383225880b","fake":false,"type":"class","name":"checkbox-2","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"70d07650-f1a9-4c43-d1c2-f1383225880c","fake":false,"type":"class","name":"checkbox-2_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: 0.3125rem; border-top-right-radius: 0.3125rem; border-bottom-left-radius: 0.3125rem; border-bottom-right-radius: 0.3125rem; 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":"70d07650-f1a9-4c43-d1c2-f1383225880d","fake":false,"type":"class","name":"checkbox-2_check","namespace":"","comb":"","styleLess":"width: 0%; height: 0%; border-top-left-radius: 0.15625rem; border-top-right-radius: 0.15625rem; border-bottom-left-radius: 0.15625rem; border-bottom-right-radius: 0.15625rem; background-color: #f6ad12;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-9","interactionTypeId":"MOUSE_CLICK_INTERACTION","eventIds":["e-17","e-18"],"target":"663e56203dc79fcfa94527f5|20562205-b4e4-4bcd-6bd3-7aba0ddc3141","createdOn":1710524238809}],"events":[{"id":"e-17","name":"","animationType":"custom","eventTypeId":"MOUSE_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-11","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-62"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e56203dc79fcfa94527f5|20562205-b4e4-4bcd-6bd3-7aba0ddc3141","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e56203dc79fcfa94527f5|20562205-b4e4-4bcd-6bd3-7aba0ddc3141","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1710524238811},{"id":"e-18","name":"","animationType":"custom","eventTypeId":"MOUSE_SECOND_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-12","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-61"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e56203dc79fcfa94527f5|20562205-b4e4-4bcd-6bd3-7aba0ddc3141","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e56203dc79fcfa94527f5|20562205-b4e4-4bcd-6bd3-7aba0ddc3141","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1710524238813}],"actionLists":[{"id":"a-11","title":"Checkbox 2 [SELECTED]","actionItemGroups":[{"actionItems":[{"id":"a-11-n","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"inOutQuad","duration":250,"target":{"nodeId":"663e56203dc79fcfa94527f5|414eae8d-894c-7e89-f05c-289beed1c353","appliesTo":"ELEMENT_CLASS","styleBlockIds":["70d07650-f1a9-4c43-d1c2-f1383225880d"],"useEventTarget":"CHILDREN","boundaryMode":false},"widthValue":100,"heightValue":100,"widthUnit":"%","heightUnit":"%","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1710524202141},{"id":"a-12","title":"Checkbox 2 [DESELECT]","actionItemGroups":[{"actionItems":[{"id":"a-12-n","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"inOutQuad","duration":250,"target":{"nodeId":"663e56203dc79fcfa94527f5|414eae8d-894c-7e89-f05c-289beed1c353","appliesTo":"ELEMENT_CLASS","styleBlockIds":["70d07650-f1a9-4c43-d1c2-f1383225880d"],"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