"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9633],{3905:function(e,t,a){a.d(t,{Zo:function(){return p},kt:function(){return m}});var n=a(7294);function c(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function o(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?l(Object(a),!0).forEach((function(t){c(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function i(e,t){if(null==e)return{};var a,n,c=function(e,t){if(null==e)return{};var a,n,c={},l=Object.keys(e);for(n=0;n<l.length;n++)a=l[n],t.indexOf(a)>=0||(c[a]=e[a]);return c}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)a=l[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(c[a]=e[a])}return c}var r=n.createContext({}),s=function(e){var t=n.useContext(r),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},p=function(e){var t=s(e.components);return n.createElement(r.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},h=n.forwardRef((function(e,t){var a=e.components,c=e.mdxType,l=e.originalType,r=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),h=s(a),m=c,d=h["".concat(r,".").concat(m)]||h[m]||b[m]||l;return a?n.createElement(d,o(o({ref:t},p),{},{components:a})):n.createElement(d,o({ref:t},p))}));function m(e,t){var a=arguments,c=t&&t.mdxType;if("string"==typeof e||c){var l=a.length,o=new Array(l);o[0]=h;var i={};for(var r in t)hasOwnProperty.call(t,r)&&(i[r]=t[r]);i.originalType=e,i.mdxType="string"==typeof e?e:c,o[1]=i;for(var s=2;s<l;s++)o[s]=a[s];return n.createElement.apply(null,o)}return n.createElement.apply(null,a)}h.displayName="MDXCreateElement"},2695:function(e,t,a){a.d(t,{Z:function(){return i}});var n=a(7462),c=a(3366),l=a(7294),o=["isBad","isGood","children","disableFullscreen","limitWidth"];function i(e){var t=e.isBad,a=e.isGood,i=e.children,r=e.disableFullscreen,s=e.limitWidth,p=(0,c.Z)(e,o),b=(0,l.useState)(!1),h=b[0],m=b[1];return l.createElement("div",{className:"preview-box-wrapper",style:s?{width:s,display:"table",margin:"0 auto"}:{}},!r&&l.createElement("button",{"aria-label":h?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");h?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),m(!h)}},h?l.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},l.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):l.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},l.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),t&&l.createElement("div",{className:"is-bad-example style-red"},l.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},l.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),a&&l.createElement("div",{className:"is-good-example style-green"},l.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},l.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),l.createElement("iframe",(0,n.Z)({width:"100%",className:"docus-preview-box"+(h?" is-fullscreen":""),srcDoc:i},p)))}},5571:function(e,t,a){a.r(t),a.d(t,{frontMatter:function(){return r},contentTitle:function(){return s},metadata:function(){return p},toc:function(){return b},default:function(){return m}});var n=a(7462),c=a(3366),l=(a(7294),a(3905)),o=a(2695),i=["components"],r={title:"Checkbox",sidebar_position:3},s=void 0,p={unversionedId:"forms/checkbox",id:"forms/checkbox",isDocsHomePage:!1,title:"Checkbox",description:"Default checkboxes can be customized with FlatifyCSS, it is done with pure CSS which has a clean design and is keyboard friendly, also easy to have one.",source:"@site/docs/forms/checkbox.mdx",sourceDirName:"forms",slug:"/forms/checkbox",permalink:"/docs/forms/checkbox",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/forms/checkbox.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Checkbox",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Select",permalink:"/docs/forms/select"},next:{title:"Radio",permalink:"/docs/forms/radio"}},b=[{value:"States",id:"states",children:[],level:3},{value:"Sizes",id:"sizes",children:[],level:2},{value:"Checkbox buttons",id:"checkbox-buttons",children:[],level:2},{value:"Customization",id:"customization",children:[],level:2}],h={toc:b};function m(e){var t=e.components,a=(0,c.Z)(e,i);return(0,l.kt)("wrapper",(0,n.Z)({},h,a,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,"Default checkboxes can be customized with FlatifyCSS, it is done with pure CSS which has a clean design and is keyboard friendly, also easy to have one.",(0,l.kt)("br",{parentName:"p"}),"\n","First you need to wrap your checkbox with the ",(0,l.kt)("inlineCode",{parentName:"p"},".checkbox-wrapper")," class (it is better to wrap with ",(0,l.kt)("inlineCode",{parentName:"p"},"<label> tag"),"), and add `",(0,l.kt)("span",{class:"check"})," after the input, that is it and now you have a custom checkbox."),(0,l.kt)(o.Z,{height:"100px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Checkboxes</title> </head> <body> <label class="checkbox-wrapper"> <input type="checkbox" checked/> <span class="check"></span> I Agree to Privacy Policy. </label> </body>\n</html>',mdxType:"PreviewBox"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'{3} title="index.html"',"{3}":!0,title:'"index.html"'},'<label class="checkbox-wrapper">\n  <input type="checkbox" checked />\n  <span class="check"></span>\n  I Agree to Privacy Policy.\n</label>\n')),(0,l.kt)("h3",{id:"states"},"States"),(0,l.kt)("p",null,"A checkbox might be checked, disabled or Indeterminate, so it is necessary to know about them. By adding the ",(0,l.kt)("inlineCode",{parentName:"p"},"checked")," HTML attribute it will be checked. The ",(0,l.kt)("inlineCode",{parentName:"p"},"disabled")," attribute will remove element functionality. Checkboxes can be both checked and disabled at the same time.",(0,l.kt)("br",{parentName:"p"}),"\n","Indeterminate is the neutral state when a checkbox is neither or either true or false, as MDN Web Docs ",(0,l.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes"},"mentions"),":"),(0,l.kt)("blockquote",null,"No browser currently supports indeterminate as an attribute. It must be set via JavaScript. See Indeterminate state checkboxes for details."),(0,l.kt)("p",null,"Though indeterminate is not an HTML attribute but can be styled by CSS also reading ",(0,l.kt)("a",{parentName:"p",href:"https://css-tricks.com/indeterminate-checkboxes/"},"this article from CSS Tricks"),"\nhelps you understand its usage more."),(0,l.kt)(o.Z,{height:"230px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Checkboxes</title> </head> <body> <label class="checkbox-wrapper"> <input type="checkbox" disabled /> <span class="check"></span> I am disabled. </label> <label class="checkbox-wrapper"> <input type="checkbox" checked disabled/> <span class="check"></span> I am checked and disabled! </label> <label class="checkbox-wrapper"> <input type="checkbox" /> <span class="check"></span> I am not checked. </label> <label class="checkbox-wrapper"> <input type="checkbox" checked/> <span class="check"></span> I am checked! </label> <label class="checkbox-wrapper"> <input type="checkbox" class="indeterminate-checkbox" /> <span class="check"></span> I am neither false or true. (by JavaScript) </label> </body> <script> document.querySelector(".indeterminate-checkbox").indeterminate = true; <\/script>\n</html>',mdxType:"PreviewBox"}),(0,l.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"Validation")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"There are ",(0,l.kt)("inlineCode",{parentName:"p"},".valid"),", ",(0,l.kt)("inlineCode",{parentName:"p"},".warning")," and ",(0,l.kt)("inlineCode",{parentName:"p"},".invalid")," classes for validation. You can add them to ",(0,l.kt)("inlineCode",{parentName:"p"},".checkbox-wrapper"),"."))),(0,l.kt)("h2",{id:"sizes"},"Sizes"),(0,l.kt)("p",null,"To change the checkbox size use ",(0,l.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"size setter classes"),".\nThese classes just set a ",(0,l.kt)("inlineCode",{parentName:"p"},"font-size")," property so it is possible to change it yourself by writing custom CSS. Do not forget to add class to the wrapper to change label size as well."),(0,l.kt)(o.Z,{height:"240px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Checkboxes</title> </head> <body> <label class="checkbox-wrapper size-xs" style="width: 100%"> <input type="checkbox" /> <span class="check"></span> I Agree to Privacy Policy. </label> <label class="checkbox-wrapper" style="width: 100%"> <input type="checkbox" /> <span class="check"></span> I Agree to Privacy Policy. </label> <label class="checkbox-wrapper size-lg" style="width: 100%"> <input type="checkbox" /> <span class="check"></span> I Agree to Privacy Policy. </label> <label class="checkbox-wrapper size-3x" style="width: 100%"> <input type="checkbox" /> <span class="check"></span> I Agree to Privacy Policy. </label> </body>\n</html>',mdxType:"PreviewBox"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<label class="checkbox-wrapper size-xs">\n  <input type="checkbox" />\n  <span class="check"></span>\n  I Agree to Privacy Policy.\n</label>\n\n<label class="checkbox-wrapper size-xs">\n  <input type="checkbox" />\n  <span class="check"></span>\n  I Agree to Privacy Policy.\n</label>\n\n<label class="checkbox-wrapper size-lg">\n  <input type="checkbox" />\n  <span class="check"></span>\n  I Agree to Privacy Policy.\n</label>\n\n<label class="checkbox-wrapper size-3x">\n  <input type="checkbox" />\n  <span class="check"></span>\n  I Agree to Privacy Policy.\n</label>\n')),(0,l.kt)("h2",{id:"checkbox-buttons"},"Checkbox buttons"),(0,l.kt)("p",null,"It is possible to change checkboxes appearance similar to buttons, it is a bit different from custom checkboxes also it is necessary to ",(0,l.kt)("a",{parentName:"p",href:"/docs/components/buttons/button"},"read about buttons"),", here is an example:"),(0,l.kt)(o.Z,{height:"160px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Checkboxes</title> </head> <body> <div class="flex-center"> <input id="my-checkbox-button1" class="checkbox-button" type="checkbox" \tname="checkbox-button" /> <label for="my-checkbox-button1" class="button style-blue">Pizza</label> <input id="my-checkbox-button2" class="checkbox-button" type="checkbox" \tname="checkbox-button" /> <label for="my-checkbox-button2" class="button style-red">Sushi</label> <input id="my-checkbox-button3" class="checkbox-button" type="checkbox" \tname="checkbox-button" /> <label for="my-checkbox-button3" class="button style-green">Taco</label> </div> <div class="flex-center"> <input id="my-checkbox-button4" class="checkbox-button" type="checkbox" \tname="checkbox-button" /> <label for="my-checkbox-button4" class="button outline style-blue">Pizza</label> <input id="my-checkbox-button5" class="checkbox-button" type="checkbox" \tname="checkbox-button" /> <label for="my-checkbox-button5" class="button outline style-red">Sushi</label> <input id="my-checkbox-button6" class="checkbox-button" type="checkbox" \tname="checkbox-button" /> <label for="my-checkbox-button6" class="button outline style-green">Taco</label> </div> </body>\n</html>',mdxType:"PreviewBox"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<input id="my-checkbox-button1" class="checkbox-button" type="checkbox" name="checkbox-button" />\n<label for="my-checkbox-button1" class="button style-blue">Pizza</label>\n\n<input id="my-checkbox-button2" class="checkbox-button" type="checkbox" name="checkbox-button" />\n<label for="my-checkbox-button2" class="button style-red">Sushi</label>\n\n<input id="my-checkbox-button3" class="checkbox-button" type="checkbox" name="checkbox-button" />\n<label for="my-checkbox-button3" class="button style-green">Taco</label>\n')),(0,l.kt)("h2",{id:"customization"},"Customization"),(0,l.kt)("p",null,"There are CSS variables for customizing checkboxes:"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-accent-color"),(0,l.kt)("br",{parentName:"p"}),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-bg-color"),(0,l.kt)("br",{parentName:"p"}),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-txt-color"),(0,l.kt)("br",{parentName:"p"}),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-border-color"),(0,l.kt)("br",{parentName:"p"}),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-border-color__focus"),(0,l.kt)("br",{parentName:"p"}),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-border-color__valid"),(0,l.kt)("br",{parentName:"p"}),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-border-color__warning"),(0,l.kt)("br",{parentName:"p"}),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-border-color__invalid")),(0,l.kt)("p",null,"Here is an example of these variables usage:"),(0,l.kt)(o.Z,{height:"240px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Inputs</title> <style> .checkbox-wrapper{ --flatify__form-element-accent-color: #37BC9B; --flatify__form-element-bg-color: #FFCE54; --flatify__form-element-txt-color: #434A54; --flatify__form-element-border-color: #E0C341; --flatify__form-element-border-color__focus: #F6BB42; --flatify__form-element-border-color__valid: #5D9CEC; --flatify__form-element-border-color__warning: #8067B7; --flatify__form-element-border-color__invalid: #BF263C; } </style> </head> <body> <label class="checkbox-wrapper"> <input type="checkbox" disabled /> <span class="check"></span> I am a customized checkbox. </label> <label class="checkbox-wrapper"> <input type="checkbox" checked disabled/> <span class="check"></span> I am a customized checkbox. </label> <label class="checkbox-wrapper"> <input type="checkbox" /> <span class="check"></span> I am a customized checkbox. </label> <label class="checkbox-wrapper"> <input type="checkbox" checked/> <span class="check"></span> I am a customized checkbox. </label> <label class="checkbox-wrapper"> <input type="checkbox" class="indeterminate-checkbox" /> <span class="check"></span> I am a customized checkbox. </label> </body> <script> document.querySelector(".indeterminate-checkbox").indeterminate = true; <\/script>\n</html>',mdxType:"PreviewBox"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},".checkbox-wrapper {\n  --flatify__form-element-accent-color: #37bc9b;\n  --flatify__form-element-bg-color: #ffce54;\n  --flatify__form-element-txt-color: #434a54;\n  --flatify__form-element-border-color: #e0c341;\n  --flatify__form-element-border-color__focus: #f6bb42;\n  --flatify__form-element-border-color__valid: #5d9cec;\n  --flatify__form-element-border-color__warning: #8067b7;\n  --flatify__form-element-border-color__invalid: #bf263c;\n}\n")))}m.isMDXComponent=!0}}]);