"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6011],{3905:function(e,t,l){l.d(t,{Zo:function(){return p},kt:function(){return g}});var n=l(7294);function a(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function r(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),l.push.apply(l,n)}return l}function c(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?r(Object(l),!0).forEach((function(t){a(e,t,l[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):r(Object(l)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))}))}return e}function s(e,t){if(null==e)return{};var l,n,a=function(e,t){if(null==e)return{};var l,n,a={},r=Object.keys(e);for(n=0;n<r.length;n++)l=r[n],t.indexOf(l)>=0||(a[l]=e[l]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n<r.length;n++)l=r[n],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(a[l]=e[l])}return a}var o=n.createContext({}),i=function(e){var t=n.useContext(o),l=t;return e&&(l="function"==typeof e?e(t):c(c({},t),e)),l},p=function(e){var t=i(e.components);return n.createElement(o.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var l=e.components,a=e.mdxType,r=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),m=i(l),g=a,d=m["".concat(o,".").concat(g)]||m[g]||h[g]||r;return l?n.createElement(d,c(c({ref:t},p),{},{components:l})):n.createElement(d,c({ref:t},p))}));function g(e,t){var l=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=l.length,c=new Array(r);c[0]=m;var s={};for(var o in t)hasOwnProperty.call(t,o)&&(s[o]=t[o]);s.originalType=e,s.mdxType="string"==typeof e?e:a,c[1]=s;for(var i=2;i<r;i++)c[i]=l[i];return n.createElement.apply(null,c)}return n.createElement.apply(null,l)}m.displayName="MDXCreateElement"},2695:function(e,t,l){l.d(t,{Z:function(){return s}});var n=l(7462),a=l(3366),r=l(7294),c=["isBad","isGood","children","disableFullscreen","limitWidth"];function s(e){var t=e.isBad,l=e.isGood,s=e.children,o=e.disableFullscreen,i=e.limitWidth,p=(0,a.Z)(e,c),h=(0,r.useState)(!1),m=h[0],g=h[1];return r.createElement("div",{className:"preview-box-wrapper",style:i?{width:i,display:"table",margin:"0 auto"}:{}},!o&&r.createElement("button",{"aria-label":m?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");m?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),g(!m)}},m?r.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},r.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"})):r.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},r.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&&r.createElement("div",{className:"is-bad-example style-red"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},r.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"}))),l&&r.createElement("div",{className:"is-good-example style-green"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},r.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"}))),r.createElement("iframe",(0,n.Z)({width:"100%",className:"docus-preview-box"+(m?" is-fullscreen":""),srcDoc:s},p)))}},8914:function(e,t,l){l.r(t),l.d(t,{frontMatter:function(){return o},contentTitle:function(){return i},metadata:function(){return p},toc:function(){return h},default:function(){return g}});var n=l(7462),a=l(3366),r=(l(7294),l(3905)),c=l(2695),s=["components"],o={title:"Toggle switch",sidebar_position:5},i=void 0,p={unversionedId:"forms/toggle",id:"forms/toggle",isDocsHomePage:!1,title:"Toggle switch",description:"The toggle switch can be either checkbox or radio, it depends on the use-case and what you want to do.",source:"@site/docs/forms/toggle.mdx",sourceDirName:"forms",slug:"/forms/toggle",permalink:"/docs/forms/toggle",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/forms/toggle.mdx",tags:[],version:"current",sidebarPosition:5,frontMatter:{title:"Toggle switch",sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Radio",permalink:"/docs/forms/radio"},next:{title:"Buttons",permalink:"/docs/components/buttons/button"}},h=[{value:"Checkbox toggle",id:"checkbox-toggle",children:[],level:2},{value:"Radio toggle",id:"radio-toggle",children:[],level:2},{value:"Sizes",id:"sizes",children:[],level:2},{value:"Customization",id:"customization",children:[],level:2}],m={toc:h};function g(e){var t=e.components,l=(0,a.Z)(e,s);return(0,r.kt)("wrapper",(0,n.Z)({},m,l,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"The toggle switch can be either checkbox or radio, it depends on the use-case and what you want to do."),(0,r.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,r.kt)("div",{parentName:"div",className:"admonition-heading"},(0,r.kt)("h5",{parentName:"div"},(0,r.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,r.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,r.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,r.kt)("div",{parentName:"div",className:"admonition-content"},(0,r.kt)("p",{parentName:"div"},"There are ",(0,r.kt)("inlineCode",{parentName:"p"},".valid"),", ",(0,r.kt)("inlineCode",{parentName:"p"},".warning")," and ",(0,r.kt)("inlineCode",{parentName:"p"},".invalid")," classes for validation. You can add them to ",(0,r.kt)("inlineCode",{parentName:"p"},".toggle-wrapper"),"."))),(0,r.kt)("h2",{id:"checkbox-toggle"},"Checkbox toggle"),(0,r.kt)("p",null,"All toggles can be checked."),(0,r.kt)(c.Z,{height:"190px",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>Toggle switch</title> </head> <body> <label class="toggle-wrapper"> <input type="checkbox" name="the-toggle" role="switch" disabled /> <span class="check"></span> Invert colors </label> <label class="toggle-wrapper"> <input type="checkbox" name="the-toggle" role="switch" checked /> <span class="check"></span> High contrast text </label> <label class="toggle-wrapper"> <input type="checkbox" name="the-toggle" role="switch" /> <span class="check"></span> Night light </label> <label class="toggle-wrapper"> <input type="checkbox" name="the-toggle" role="switch" /> <span class="check"></span> Color correction </label> <label class="toggle-wrapper"> Label before toggle switch <input type="checkbox" name="the-toggle" role="switch" /> <span class="check after-label"></span> </label> </body>\n</html>',mdxType:"PreviewBox"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<label class="toggle-wrapper">\n  <input type="checkbox" name="the-toggle" role="switch" checked />\n  <span class="check"></span>\n  High contrast text\n</label>\n\n<label class="toggle-wrapper">\n  <input type="checkbox" name="the-toggle" role="switch" />\n  <span class="check"></span>\n  Night light\n</label>\n\n<label class="toggle-wrapper">\n  <input type="checkbox" name="the-toggle" role="switch" />\n  <span class="check"></span>\n  Color correction\n</label>\n')),(0,r.kt)("h2",{id:"radio-toggle"},"Radio toggle"),(0,r.kt)("p",null,"One of them can be checked, note that radios' name attribute should be the same."),(0,r.kt)(c.Z,{height:"180px",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>Toggle switch</title> <style> .toggle-wrapper svg{ width: 2em; height: 2em; fill: #809cb6; } .brain .check{ margin-left: 0.5em; } </style> </head> <body class="flex-column-center"> <label class="toggle-wrapper heart size-lg"> <input type="radio" name="the-toggle" role="switch" checked /> <span class="check"></span> <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="18 22 55 50"> <path d="M63.878 30.241c-2.197-1.816-5.016-2.816-7.936-2.816-3.375 0-6.643 1.346-8.963 3.689-.418.422-.809.875-1.174 1.365-2.842-3.779-7.58-5.721-12.285-4.865-3.895.707-6.955 2.85-9.098 6.363-3.018 4.957-3.264 9.736-.73 14.209 1.357 2.398 3.117 4.73 5.375 7.127 4.141 4.404 9.045 8.586 15.441 13.162.406.287.842.432 1.295.432.701 0 1.176-.354 1.41-.529 5.682-4.055 10.342-7.961 14.248-11.943 2.211-2.252 4.719-5.021 6.553-8.475.785-1.479 1.682-3.467 1.627-5.738-.117-4.887-2.056-8.918-5.763-11.981z"></path> </svg> </label> <label class="toggle-wrapper brain size-lg"> <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" enableBackground="new 0 0 100 100" viewBox="0 0 100 100" > <switch> <g> <path d="M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2c0 1.8.7 3.6 2 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5c1.3-1.3 2-3.1 2-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z"></path> <path d="M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z"></path> <g> <path d="M31 9.6c-.3 0-.6-.1-.9-.1-7.1 0-13 5.4-14.5 12.6.2 5 2.2 11.1 10 14.1 1 .4 1.6 1.6 1.1 2.6-.3.8-1.1 1.3-1.9 1.3-.2 0-.5 0-.7-.1-7.1-2.8-10.5-7.9-11.9-13.1-3.2 2.3-5.4 6.2-5.4 10.7 0 3.6 1.4 6.9 3.6 9.2-1.5 2.2-2.3 5-2.3 7.9 0 3.2 1.1 6.1 2.8 8.4 1.6-4.2 4.8-8.2 11.1-9.8 1.1-.3 2.2.4 2.5 1.5.3 1.1-.4 2.2-1.5 2.5-6.3 1.6-8.4 6.2-9 9.9.1 7.3 4.1 13.4 9.8 16.4v-.4c.2-5.1 4-8.1 7.7-8.9 4.2-.9 8.1.9 9.9 4.7.5 1 .7 2 .7 3 0 1.1-.9 2-2 2s-2-.9-2-2c0-.4-.1-.8-.3-1.2-1.2-2.4-3.6-2.9-5.4-2.5-2.1.5-4.4 2.2-4.5 5.1-.1 1.7.2 3.3.6 4.8 2.3 5.5 7.4 9.4 13.3 9.4 2.3 0 4.5-.6 6.4-1.7V4.5c-1.9-1.3-4-2-6.4-2-4.9 0-8.9 2.9-10.8 7.1zm-5.5 13.1c.2-1.1 1.3-1.8 2.4-1.6.2 0 3.1.7 6 3 2.5-3 1.6-7.1 1.6-7.1-.3-1.1.4-2.2 1.5-2.4 1.1-.2 2.2.4 2.4 1.5.1.3 1.4 6.5-2.8 11 .2.2.3.4.5.6 2.4 3.7 3 8.4 1.7 13.9-.2.9-1 1.6-2 1.6h-.4c-1.1-.2-1.8-1.3-1.5-2.4 1-4.4.6-8-1.2-10.8-2.4-3.7-6.6-4.8-6.7-4.8-1-.3-1.7-1.4-1.5-2.5zm4.4 43.2h-.3c-1 0-1.8-.7-2-1.7-.2-1.1.6-2.1 1.7-2.3.8-.1 7.4-1.6 7-9.4-.1-1.1.8-2.1 1.9-2.1 1.1-.1 2.1.8 2.1 1.9.5 9.3-6.6 12.9-10.4 13.6zM93.3 37.6c0-4.5-2.2-8.4-5.4-10.7C86.5 32.1 83.1 37.2 76 40c-.2.1-.5.1-.7.1-.8 0-1.6-.5-1.9-1.3-.4-1 .1-2.2 1.1-2.6 7.7-3 9.8-9.1 10-14.1C83 14.9 77.1 9.5 70 9.5c-.3 0-.6.1-1 .1-2-4.2-6-7.1-10.6-7.1-2.4 0-4.5.8-6.4 2v91.3c1.9 1 4.1 1.7 6.4 1.7 5.9 0 11-3.9 13.3-9.4.4-1.5.7-3.1.7-4.8-.1-2.9-2.3-4.6-4.5-5.1-1.8-.4-4.2.1-5.4 2.5-.2.4-.3.8-.3 1.2 0 1.1-.9 2-2 2s-2-.9-2-2c0-1 .2-2 .7-3 1.8-3.7 5.7-5.6 9.9-4.7 3.7.8 7.5 3.8 7.7 8.9v.4c5.7-3 9.6-9.1 9.8-16.3-.6-3.7-2.7-8.3-9-10-1.1-.3-1.7-1.4-1.5-2.5.3-1.1 1.4-1.7 2.5-1.5 6.3 1.6 9.6 5.6 11.1 9.8 1.7-2.3 2.8-5.2 2.8-8.4 0-3-.9-5.7-2.3-7.9 2-2.2 3.4-5.5 3.4-9.1zM70.4 65.9h-.3c-3.8-.6-10.9-4.3-10.4-13.6.1-1.1 1-2 2.1-1.9 1.1.1 2 1 1.9 2.1-.4 7.9 6.3 9.3 7 9.4 1.1.2 1.8 1.2 1.6 2.3 0 1-.9 1.7-1.9 1.7zM67.7 28c0 .1 0 .1 0 0-.1.1-.2.2-.3.2-2.2 2.3-3.8 6.1-2.4 12.4.2 1.1-.4 2.2-1.5 2.4h-.4c-.9 0-1.8-.6-2-1.6-1.2-5.5-.6-10.2 1.7-13.9.1-.2.3-.4.5-.6-4.2-4.5-2.8-10.7-2.8-11 .3-1.1 1.3-1.8 2.4-1.5 1.1.3 1.8 1.3 1.5 2.4 0 .2-.9 4.2 1.6 7.1 2.9-2.3 5.8-3 6-3 1.1-.2 2.2.5 2.4 1.6.2 1.1-.5 2.2-1.5 2.4-.5.4-3 1-5.2 3.1z"></path> </g> </g> </switch> </svg> <input type="radio" name="the-toggle" role="switch" /> <span class="check"></span> </label> </body>\n</html>',mdxType:"PreviewBox"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html",metastring:'{2,8} title="index.html"',"{2,8}":!0,title:'"index.html"'},'<label class="toggle-wrapper heart size-lg">\n  <input type="radio" name="the-toggle" role="switch" checked />\n  <span class="check"></span>\n  \x3c!-- SVG --\x3e\n</label>\n<label class="toggle-wrapper brain size-lg">\n  \x3c!-- SVG --\x3e\n  <input type="radio" name="the-toggle" role="switch" />\n  <span class="check"></span>\n</label>\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},".toggle-wrapper svg {\n  width: 2em;\n  height: 2em;\n  fill: #809cb6;\n}\n\n.brain .check {\n  margin-left: 0.5em;\n}\n")),(0,r.kt)("h2",{id:"sizes"},"Sizes"),(0,r.kt)("p",null,"To change the toggle switch size use ",(0,r.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"size setter classes"),".\nThese classes just set a ",(0,r.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,r.kt)(c.Z,{height:"250px",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>Toggle switch</title> </head> <body> <label class="toggle-wrapper size-xs"> <input type="checkbox" name="the-toggle" role="switch" checked /> <span class="check"></span> High contrast text </label> <label class="toggle-wrapper"> <input type="checkbox" name="the-toggle" role="switch" checked /> <span class="check"></span> High contrast text </label> <label class="toggle-wrapper size-2x"> <input type="checkbox" name="the-toggle" role="switch" checked /> <span class="check"></span> High contrast text </label> <label class="toggle-wrapper size-3x"> <input type="checkbox" name="the-toggle" role="switch" checked /> <span class="check"></span> High contrast text </label> </body>\n</html>',mdxType:"PreviewBox"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<label class="toggle-wrapper size-xs">\n  <input type="checkbox" name="the-toggle" role="switch" checked />\n  <span class="check"></span>\n  High contrast text\n</label>\n\n<label class="toggle-wrapper">\n  <input type="checkbox" name="the-toggle" role="switch" checked />\n  <span class="check"></span>\n  High contrast text\n</label>\n\n<label class="toggle-wrapper size-2x">\n  <input type="checkbox" name="the-toggle" role="switch" checked />\n  <span class="check"></span>\n  High contrast text\n</label>\n\n<label class="toggle-wrapper size-3x">\n  <input type="checkbox" name="the-toggle" role="switch" checked />\n  <span class="check"></span>\n  High contrast text\n</label>\n')),(0,r.kt)("h2",{id:"customization"},"Customization"),(0,r.kt)("p",null,"There are CSS variables for customizing radios:"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-accent-color"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-bg-color"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-txt-color"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-border-color"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-border-color__focus"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-border-color__valid"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-border-color__warning"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__form-element-border-color__invalid")),(0,r.kt)("p",null,"Here is an example of these variables usage:"),(0,r.kt)(c.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>Inputs</title> <style> .toggle-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="toggle-wrapper"> <input type="checkbox" name="the-toggle" role="switch" disabled /> <span class="check"></span> Invert colors </label> <label class="toggle-wrapper"> <input type="checkbox" name="the-toggle" role="switch" checked /> <span class="check"></span> High contrast text </label> <label class="toggle-wrapper"> <input type="checkbox" name="the-toggle" role="switch" /> <span class="check"></span> Night light </label> </body>\n</html>',mdxType:"PreviewBox"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},".toggle-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")))}g.isMDXComponent=!0}}]);