Bootstrap v4 - (Custom Forms) Custom - Checkbox.json

{
    "name": "Custom - Checkbox",
    "heading": "custom-checkbox",
    "description": "For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They\u2019re built on top of semantic and accessible markup, so they\u2019re solid replacements for any default form control.",
    "usage": "Each checkbox and radio is wrapped in a  for three reasons:\r\n\r\n    It provides a larger hit areas for checking the control.\r\n    It provides a helpful and semantic wrapper to help us replace the default s.\r\n    It triggers the state of the  automatically, meaning no JavaScript is required.\r\n\r\nWe hide the default  with opacity and use the .custom-control-indicator to build a new custom form indicator in its place. Unfortunately we can\u2019t build a custom one from just the  because CSS\u2019s content doesn\u2019t work on that element.\r\n\r\nWe use the sibling selector (~) for all our  states\u2014like :checked\u2014to properly style our custom form indicator. When combined with the .custom-control-description class, we can also style the text for each item based on the \u2019s state.\r\n\r\nIn the checked states, we use base64 embedded SVG icons from Open Iconic. This provides us the best control for styling and positioning across browsers and devices.",
    "snippet": "<label class=\"custom-control custom-checkbox\">\r\n  <input type=\"checkbox\" class=\"custom-control-input\">\r\n  <span class=\"custom-control-indicator\"><\/span>\r\n  <span class=\"custom-control-description\">Check this custom checkbox<\/span>\r\n<\/label>",
    "url": "https:\/\/getbootstrap.com\/docs\/4.0\/components\/forms\/#custom-forms",
    "type": "Custom Forms",
    "library": "Bootstrap v4",
    "created": "2017-11-01 00:00:00",
    "modified": "2017-11-22 00:53:52",
    "contributor_company": "Most Wanted Web Services, Inc.",
    "contributor_name": "Steve Voorhees",
    "contributor_email": "sales@mwweb.host",
    "contributor_website": "https:\/\/mostwantedwebhosting.com"
}