"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8844],{3905:function(e,t,a){a.d(t,{Zo:function(){return d},kt:function(){return u}});var n=a(7294);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function r(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 l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?r(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):r(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function o(e,t){if(null==e)return{};var a,n,i=function(e,t){if(null==e)return{};var a,n,i={},r=Object.keys(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var s=n.createContext({}),c=function(e){var t=n.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},d=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var a=e.components,i=e.mdxType,r=e.originalType,s=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),m=c(a),u=i,h=m["".concat(s,".").concat(u)]||m[u]||p[u]||r;return a?n.createElement(h,l(l({ref:t},d),{},{components:a})):n.createElement(h,l({ref:t},d))}));function u(e,t){var a=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=a.length,l=new Array(r);l[0]=m;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o.mdxType="string"==typeof e?e:i,l[1]=o;for(var c=2;c<r;c++)l[c]=a[c];return n.createElement.apply(null,l)}return n.createElement.apply(null,a)}m.displayName="MDXCreateElement"},2695:function(e,t,a){a.d(t,{Z:function(){return o}});var n=a(7462),i=a(3366),r=a(7294),l=["isBad","isGood","children","disableFullscreen","limitWidth"];function o(e){var t=e.isBad,a=e.isGood,o=e.children,s=e.disableFullscreen,c=e.limitWidth,d=(0,i.Z)(e,l),p=(0,r.useState)(!1),m=p[0],u=p[1];return r.createElement("div",{className:"preview-box-wrapper",style:c?{width:c,display:"table",margin:"0 auto"}:{}},!s&&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(),u(!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"}))),a&&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:o},d)))}},1116:function(e,t,a){a.r(t),a.d(t,{frontMatter:function(){return s},contentTitle:function(){return c},metadata:function(){return d},toc:function(){return p},default:function(){return u}});var n=a(7462),i=a(3366),r=(a(7294),a(3905)),l=a(2695),o=["components"],s={title:"Radio",sidebar_position:4},c=void 0,d={unversionedId:"forms/radio",id:"forms/radio",isDocsHomePage:!1,title:"Radio",description:"Radios are used when there are multiple options but the limit is one, users can choose to have one of them.",source:"@site/docs/forms/radio.mdx",sourceDirName:"forms",slug:"/forms/radio",permalink:"/docs/forms/radio",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/forms/radio.mdx",tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Radio",sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Checkbox",permalink:"/docs/forms/checkbox"},next:{title:"Toggle switch",permalink:"/docs/forms/toggle"}},p=[{value:"Sizes",id:"sizes",children:[],level:2},{value:"Radio buttons",id:"radio-buttons",children:[],level:2},{value:"Customization",id:"customization",children:[],level:2}],m={toc:p};function u(e){var t=e.components,a=(0,i.Z)(e,o);return(0,r.kt)("wrapper",(0,n.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"Radios are used when there are multiple options but the limit is one, users can choose to have one of them.\nFlatifyCSS has its customized radio with is pretty simple, just wrap your radio with ",(0,r.kt)("inlineCode",{parentName:"p"},".radio-wrapper")," class and add ",(0,r.kt)("inlineCode",{parentName:"p"},'<span class="check"></span>')," after your input radio inside wrapper."),(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"},".radio-wrapper"),"."))),(0,r.kt)(l.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>Radios</title> </head> <body> <label class="radio-wrapper"> <input disabled type="radio" name="choices" /> <span class="check"></span> Choice 1 </label> <label class="radio-wrapper"> <input type="radio" checked name="choices" /> <span class="check"></span> Choice 2 </label> <label class="radio-wrapper"> <input type="radio" name="choices" /> <span class="check"></span> Choice 3 </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="radio-wrapper">\n  <input disabled type="radio" name="choices" />\n  <span class="check"></span>\n  Choice 1\n</label>\n\n<label class="radio-wrapper">\n  <input type="radio" checked name="choices" />\n  <span class="check"></span>\n  Choice 2\n</label>\n\n<label class="radio-wrapper">\n  <input type="radio" name="choices" />\n  <span class="check"></span>\n  Choice 3\n</label>\n')),(0,r.kt)("h2",{id:"sizes"},"Sizes"),(0,r.kt)("p",null,"To change the radio 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)(l.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>Radios</title> </head> <body> <label class="radio-wrapper size-xs"> <input type="radio" name="choices" /> <span class="check"></span> Choice 1 </label> <label class="radio-wrapper size-md"> <input type="radio" name="choices" /> <span class="check"></span> Choice 2 </label> <label class="radio-wrapper size-2x"> <input type="radio" name="choices" /> <span class="check"></span> Choice 3 </label> <label class="radio-wrapper size-3x"> <input type="radio" checked name="choices" /> <span class="check"></span> Choice 4 </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="radio-wrapper size-xs">\n  <input type="radio" name="choices" />\n  <span class="check"></span>\n  Choice 1\n</label>\n\n<label class="radio-wrapper size-md">\n  <input type="radio" name="choices" />\n  <span class="check"></span>\n  Choice 2\n</label>\n\n<label class="radio-wrapper size-2x">\n  <input type="radio" name="choices" />\n  <span class="check"></span>\n  Choice 3\n</label>\n\n<label class="radio-wrapper size-3x">\n  <input type="radio" checked name="choices" />\n  <span class="check"></span>\n  Choice 4\n</label>\n')),(0,r.kt)("h2",{id:"radio-buttons"},"Radio buttons"),(0,r.kt)("p",null,"It is possible to change radios appearance similar to buttons, it is a bit different from custom radios also it is necessary to ",(0,r.kt)("a",{parentName:"p",href:"/docs/components/buttons/button"},"read about buttons"),", here is an example:"),(0,r.kt)(l.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>Radios</title> </head> <body> <div class="flex-center"> <input id="my-radio-button1" class="radio-button" type="radio" \tname="radio-button" /> <label for="my-radio-button1" class="button style-blue">Pizza</label> <input id="my-radio-button2" class="radio-button" type="radio" \tname="radio-button" /> <label for="my-radio-button2" class="button style-red">Sushi</label> <input id="my-radio-button3" class="radio-button" type="radio" \tname="radio-button" /> <label for="my-radio-button3" class="button style-green">Taco</label> </div> <div class="flex-center"> <input id="my-radio-button4" class="radio-button" type="radio" \tname="radio-button" /> <label for="my-radio-button4" class="button outline style-blue">Pizza</label> <input id="my-radio-button5" class="radio-button" type="radio" \tname="radio-button" /> <label for="my-radio-button5" class="button outline style-red">Sushi</label> <input id="my-radio-button6" class="radio-button" type="radio" \tname="radio-button" /> <label for="my-radio-button6" class="button outline style-green">Taco</label> </div> </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"'},'<input id="my-radio-button1" class="radio-button" type="radio" name="radio-button" />\n<label for="my-radio-button1" class="button style-blue">Pizza</label>\n\n<input id="my-radio-button2" class="radio-button" type="radio" name="radio-button" />\n<label for="my-radio-button2" class="button style-red">Sushi</label>\n\n<input id="my-radio-button3" class="radio-button" type="radio" name="radio-button" />\n<label for="my-radio-button3" class="button style-green">Taco</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)(l.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> .radio-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="radio-wrapper"> <input disabled type="radio" name="choices" /> <span class="check"></span> Choice 1 </label> <label class="radio-wrapper"> <input type="radio" checked name="choices" /> <span class="check"></span> Choice 2 </label> <label class="radio-wrapper"> <input type="radio" name="choices" /> <span class="check"></span> Choice 3 </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"'},".radio-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")))}u.isMDXComponent=!0}}]);