react-toggle-component
Version:
A React UI Component to display an awesome Toggle Button control
144 lines (134 loc) • 80.5 kB
HTML
<!DOCTYPE html><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, shrink-to-fit=no"/><style data-href="/react-toggle/styles.2543ff947a193d7f33b1.css">@import url(https://fonts.googleapis.com/css?family=Inconsolata&display=swap);@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap);</style><meta name="generator" content="Gatsby 2.17.13"/><title data-rh="true">Toggle | React Toggle</title><meta data-rh="true" name="description" content="React Toggle documentation and playground"/><meta data-rh="true" property="og:title" content="Toggle"/><meta data-rh="true" property="og:description" content="React Toggle documentation and playground"/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" name="twitter:card" content="summary"/><meta data-rh="true" name="twitter:title" content="Toggle"/><meta data-rh="true" name="twitter:description" content="React Toggle documentation and playground"/><link as="script" rel="preload" href="/react-toggle/webpack-runtime-950e38aff32dfc4babdc.js"/><link as="script" rel="preload" href="/react-toggle/styles-41a9f6aa338c835e034b.js"/><link as="script" rel="preload" href="/react-toggle/app-d0a47dca2b5d1b408c83.js"/><link as="script" rel="preload" href="/react-toggle/commons-f5facf3ce4d6402c14af.js"/><link as="script" rel="preload" href="/react-toggle/component---srcdocs-components-toggle-toggle-mdx-9299f5eef9c8f4577218.js"/><link as="fetch" rel="preload" href="/react-toggle/page-data/components/toggle/page-data.json" crossorigin="anonymous"/></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" role="group" id="gatsby-focus-wrapper"><style data-emotion-css="1ouyflx">.css-1ouyflx{font-family:'Source Sans Pro',sans-serif;font-size:20px;font-weight:400;line-height:1.5;color:var(--theme-ui-colors-text,#2D3747);background-color:var(--theme-ui-colors-background,#FFFFFF);}</style><div class="css-1ouyflx"><style data-emotion-css="jrjj6h">.css-jrjj6h > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><style data-emotion-css="1ubpee3">.css-1ubpee3{min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-1ubpee3 > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><style data-emotion-css="hbri28">.css-hbri28{box-sizing:border-box;min-width:0;min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-hbri28 > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><div data-testid="layout" class="css-hbri28"><style data-emotion-css="1xva7m0">body{margin:0;padding:0;}.icon-link{display:none;}.with-overlay{overflow:hidden;}</style><style data-emotion-css="zf0iqh">.css-zf0iqh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><style data-emotion-css="1tjxv7i">.css-1tjxv7i{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><style data-emotion-css="238csb">.css-238csb{box-sizing:border-box;min-width:0;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><main class="css-238csb"><style data-emotion-css="18wmtq">.css-18wmtq{background-color:var(--theme-ui-colors-header-bg,#F5F6F7);position:relative;z-index:1;border-bottom:1px solid var(--theme-ui-colors-border,#CED4DE);}</style><div data-testid="header" class="css-18wmtq"><style data-emotion-css="zankq9">.css-zankq9{display:none;position:absolute;top:calc(100% + 15px);left:30px;}@media screen and (max-width:57.5em){.css-zankq9{display:block;}}</style><style data-emotion-css="1s0wdqz">.css-1s0wdqz{box-sizing:border-box;min-width:0;display:none;position:absolute;top:calc(100% + 15px);left:30px;}@media screen and (max-width:57.5em){.css-1s0wdqz{display:block;}}</style><div class="css-1s0wdqz"><style data-emotion-css="4019lz">.css-4019lz{padding:0;outline:none;background:transparent;border:none;color:var(--theme-ui-colors-header-text,#2D3747);opacity:0.5;cursor:pointer;}.css-4019lz:hover{cursor:pointer;}</style><button class="css-4019lz"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button></div><style data-emotion-css="z6jak6">.css-z6jak6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding-left:32px;padding-right:32px;position:relative;height:80px;}</style><div class="css-z6jak6"><style data-emotion-css="xenp3v">.css-xenp3v{-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><style data-emotion-css="1abzlu">.css-1abzlu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><style data-emotion-css="ug0363">.css-ug0363{box-sizing:border-box;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><div data-testid="logo" class="css-ug0363"><style data-emotion-css="gyijir">.css-gyijir{font-weight:600;color:var(--theme-ui-colors-header-text,#2D3747);-webkit-text-decoration:none;text-decoration:none;}.css-gyijir:hover{color:var(--theme-ui-colors-primary,#0B5FFF);}</style><a class="css-gyijir" href="/react-toggle/">React Toggle</a></div><style data-emotion-css="k008qs">.css-k008qs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><style data-emotion-css="80zs6q">.css-80zs6q{box-sizing:border-box;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-80zs6q"><style data-emotion-css="12z0wuy">.css-12z0wuy{margin-right:8px;}</style><style data-emotion-css="q6cf68">.css-q6cf68{box-sizing:border-box;min-width:0;margin-right:8px;}</style><div class="css-q6cf68"><style data-emotion-css="1is33jg">.css-1is33jg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;outline:none;padding:12px;border:none;border-radius:9999px;background-color:var(--theme-ui-colors-header-button-bg,#0B5FFF);color:var(--theme-ui-colors-header-button-color,#FFFFFF);font-size:12px;font-weight:600;cursor:pointer;}</style><a href="https://github.com/gfazioli/react-toggle" target="_blank" rel="noopener noreferrer" class="css-1is33jg"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></div><button class="css-1is33jg"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></button></div><style data-emotion-css="1gncnz1">.css-1gncnz1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;bottom:-40px;right:30px;background-color:transparent;color:var(--theme-ui-colors-muted,#67788a);font-size:14px;-webkit-text-decoration:none;text-decoration:none;border-radius:4px;}</style><a href="https://github.com/gfazioli/react-toggle/edit/master/srcdocs/components/Toggle/toggle.mdx" target="_blank" rel="noopener noreferrer" class="css-1gncnz1"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg><style data-emotion-css="1iuj5ih">.css-1iuj5ih{padding-left:8px;}</style><style data-emotion-css="1x2jprh">.css-1x2jprh{box-sizing:border-box;min-width:0;padding-left:8px;}</style><div class="css-1x2jprh">Edit page</div></a></div></div><style data-emotion-css="8s6gy6">.css-8s6gy6{padding-top:0;padding-bottom:0;-webkit-flex:1;-ms-flex:1;flex:1;display:grid;grid-template-columns:250px 1fr;}@media screen and (max-width:57.5em){.css-8s6gy6{display:block;}}</style><div class="css-8s6gy6"><style data-emotion-css="1tn7q1x">.css-1tn7q1x{z-index:999;position:fixed;top:81px;right:0;bottom:0;left:0;background:rgba(0,0,0,0.6);-webkit-transition:all .2s ease-out;transition:all .2s ease-out;visibility:hidden;opacity:0;}</style><style data-emotion-css="h4snl3">.css-h4snl3{box-sizing:border-box;min-width:0;z-index:999;position:fixed;top:81px;right:0;bottom:0;left:0;background:rgba(0,0,0,0.6);-webkit-transition:all .2s ease-out;transition:all .2s ease-out;visibility:hidden;opacity:0;}</style><div class="css-h4snl3"></div><style data-emotion-css="1ethd5x">.css-1ethd5x{padding-top:32px;padding-bottom:32px;padding-left:32px;padding-right:32px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;z-index:1;min-width:0;max-height:100vh;border-right:1px solid var(--theme-ui-colors-border,#CED4DE);overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--theme-ui-colors-sidebar-bg,#FFFFFF);}@media screen and (max-width:57.5em){.css-1ethd5x{z-index:9999;display:block;position:fixed;top:81px;left:0;bottom:0;width:256px;padding-left:32px;padding-right:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);-webkit-transition:-webkit-transform .2s ease-out;-webkit-transition:transform .2s ease-out;transition:transform .2s ease-out;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}}</style><style data-emotion-css="1li9yso">.css-1li9yso{box-sizing:border-box;min-width:0;padding-top:32px;padding-bottom:32px;padding-left:32px;padding-right:32px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;z-index:1;min-width:0;max-height:100vh;border-right:1px solid var(--theme-ui-colors-border,#CED4DE);overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--theme-ui-colors-sidebar-bg,#FFFFFF);}@media screen and (max-width:57.5em){.css-1li9yso{z-index:9999;display:block;position:fixed;top:81px;left:0;bottom:0;width:256px;padding-left:32px;padding-right:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);-webkit-transition:-webkit-transform .2s ease-out;-webkit-transition:transform .2s ease-out;transition:transform .2s ease-out;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}}</style><div data-testid="sidebar" class="css-1li9yso"><style data-emotion-css="111boms">.css-111boms{margin-bottom:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div data-testid="nav-search" class="css-111boms"><style data-emotion-css="1mo6uhh">.css-1mo6uhh{color:var(--theme-ui-colors-border,#CED4DE);margin-right:8px;}</style><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-1mo6uhh"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg><style data-emotion-css="1bbueiu">.css-1bbueiu{outline:none;background:none;border:none;color:var(--theme-ui-colors-text,#2D3747);font-size:14px;}</style><input placeholder="Type to search..." value="" class="css-1bbueiu"/></div><style data-emotion-css="1rqvyud">.css-1rqvyud{margin-top:8px;margin-bottom:8px;display:block;color:var(--theme-ui-colors-sidebar-navGroup,#2D3747);-webkit-text-decoration:none;text-decoration:none;font-size:16px;}.css-1rqvyud.active{color:var(--theme-ui-colors-sidebar-navLinkActive,#0B5FFF);}</style><a class="css-1rqvyud" href="/react-toggle/code-of-conduct">Code of conduct</a><style data-emotion-css="1ebprri">.css-1ebprri{margin-top:16px;margin-bottom:16px;}</style><div data-testid="nav-group" class="css-1ebprri"><style data-emotion-css="1c8kbwa">.css-1c8kbwa{margin-bottom:4px;font-size:16px;font-weight:500;color:var(--theme-ui-colors-sidebar-navGroup,#2D3747);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div class="css-1c8kbwa">Components<style data-emotion-css="1scp5x8">.css-1scp5x8{margin-left:4px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline;-webkit-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:-webkit-transform .3s ease-in-out;-webkit-transition:transform .3s ease-in-out;transition:transform .3s ease-in-out;}</style><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-1scp5x8"><polyline points="6 9 12 15 18 9"></polyline></svg></div><style data-emotion-css="1isemmb">.css-1isemmb{margin-left:8px;}</style><div data-testid="nav-group-links" class="css-1isemmb"><a aria-current="page" class="css-1rqvyud active" href="/react-toggle/components/toggle">Toggle</a><style data-emotion-css="1ooej63">.css-1ooej63{margin-top:8px;margin-bottom:8px;display:block;color:var(--theme-ui-colors-sidebar-tocLink,#67788a);-webkit-text-decoration:none;text-decoration:none;font-size:14px;margin-left:16px;position:relative;}.css-1ooej63.active{color:var(--theme-ui-colors-sidebar-tocLinkActive,#1D2330);}.css-1ooej63.active::before{content:"";position:absolute;display:block;top:2px;left:-8px;height:1rem;background-color:var(--theme-ui-colors-primary,#0B5FFF);-webkit-transition:width 200ms ease 0s;transition:width 200ms ease 0s;width:2px;border-radius:1px;}</style><a class=" css-1ooej63" href="/react-toggle/components/toggle#basic-usage">Basic usage</a><a class=" css-1ooej63" href="/react-toggle/components/toggle#properties">Properties</a></div></div><a class="css-1rqvyud" href="/react-toggle/">Get Started</a><a class="css-1rqvyud" href="/react-toggle/theming">Theming</a><a class="css-1rqvyud" href="/react-toggle/upgrade">Upgrade Guide</a></div><style data-emotion-css="1w3d2mg">.css-1w3d2mg{background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-1w3d2mg{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><style data-emotion-css="kjtkh5">.css-kjtkh5{width:100%;min-width:0;max-width:1280px;margin-left:auto;margin-right:auto;padding:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-kjtkh5{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><style data-emotion-css="1307vk3">.css-1307vk3{box-sizing:border-box;min-width:0;width:100%;min-width:0;max-width:1280px;margin-left:auto;margin-right:auto;padding:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-1307vk3{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><div data-testid="main-container" class="css-1307vk3"><style data-emotion-css="1vci3bl">.css-1vci3bl{padding:0;margin:0;margin-bottom:16px;font-size:48px;font-family:'Source Sans Pro',sans-serif;line-height:1.125;font-weight:700;}</style><h1 id="toggle" class="css-1vci3bl">Toggle</h1><style data-emotion-css="1ftn47p">.css-1ftn47p{padding:0;margin:0;margin-bottom:16px;}</style><p class="css-1ftn47p">The Toggle component is an useful replacement to the standar input checkbox component.
Anyway, remember that the toggle component is an extension of the input checkbox. So, you can use it inside a form as well.
In fact, remember to use the props <style data-emotion-css="ueqitl">.css-ueqitl{font-family:Inconsolata;}</style><code class="css-ueqitl">name</code> when you're using multiple toggle component in your view.</p><h2 id="basic-usage"><style data-emotion-css="1r0pe6c">.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="#basic-usage" class="css-1r0pe6c">Basic usage</a></h2><p class="css-1ftn47p">You can wrap the Toggle component with <code class="css-ueqitl">label</code></p><div style="position:relative;user-select:auto;margin:0;margin-right:auto;width:100%;height:auto;max-width:100%;min-width:260px;box-sizing:border-box" data-testid="playground"><style data-emotion-css="79elbk">.css-79elbk{position:relative;}</style><div class="css-79elbk"><style data-emotion-css="nxr1xe">.css-nxr1xe{height:auto;display:block;min-height:100%;width:calc(100% - 2px);background-color:var(--theme-ui-colors-playground-bg,#FFFFFF);border:1px solid var(--theme-ui-colors-playground-border,#CED4DE);border-radius:4px 4px 0 0;}</style><div class="css-nxr1xe"><style data-emotion-css="mxobd5">.css-mxobd5{margin:0;padding:20px;}</style><div data-testid="live-preview" class="css-mxobd5"><label for="toggle-1">Left label <span class="sc-bwzfXH hjTDZn react-toggle "><input type="checkbox" id="toggle-1" name="toggle-1" value=""/><label for="toggle-1" class="sc-bdVaJa bDWFJH"></label></span></label></div></div><style data-emotion-css="4qwwu">.css-4qwwu{z-index:9;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;bottom:-20px;right:32px;}</style><div class="css-4qwwu"><style data-emotion-css="1ounbqd">.css-1ounbqd{padding:8px;outline:none;background:transparent;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:4px;padding-bottom:4px;background-color:var(--theme-ui-colors-border,#CED4DE);color:var(--theme-ui-colors-muted,#67788a);border-radius:0 0 3px 3px;}.css-1ounbqd:hover{cursor:pointer;}.css-1ounbqd ~ .css-1ounbqd{margin-left:4px;}</style><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></button></div></div><style data-emotion-css="1d408uj">.css-1d408uj{margin:0;padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;background-color:#FF4757;font-size:14px;color:var(--theme-ui-colors-white,#FFFFFF);}</style><style data-emotion-css="65z50w">.css-65z50w{padding:8px;border:1px solid var(--theme-ui-colors-border,#CED4DE);border-radius:0 0 4px 4px;background:#f6f8fa;border-top:0;font-family:Inconsolata;font-size:18px;}.css-65z50w * > textarea:focus{outline:none;}</style><div class="css-65z50w"><div data-testid="live-editor" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:Inconsolata;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false"><label htmlFor="toggle-1">
Left label
<Toggle name="toggle-1" />
</label></textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">label</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">htmlFor</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">toggle-1</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> Left label</span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Toggle</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">name</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">toggle-1</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">label</span><span class="token tag punctuation" style="color:#393A34">></span></div></pre><style type="text/css">
/**
* Reset the text fill color so that placeholder is visible
*/
.npm__react-simple-code-editor__textarea:empty {
-webkit-text-fill-color: inherit !important;
}
/**
* Hack to apply on some CSS on IE10 and IE11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/**
* IE doesn't support '-webkit-text-fill-color'
* So we use 'color: transparent' to make the text transparent on IE
* Unlike other browsers, it doesn't affect caret color in IE
*/
.npm__react-simple-code-editor__textarea {
color: transparent !important;
}
.npm__react-simple-code-editor__textarea::selection {
background-color: #accef7 !important;
color: transparent !important;
}
}
</style></div></div><span><div class="" style="position:absolute;user-select:none;width:10px;height:100%;top:0px;right:-5px;cursor:col-resize"></div></span></div><div style="position:relative;user-select:auto;margin:0;margin-right:auto;width:100%;height:auto;max-width:100%;min-width:260px;box-sizing:border-box" data-testid="playground"><div class="css-79elbk"><div class="css-nxr1xe"><div data-testid="live-preview" class="css-mxobd5"><label for="toggle-2"><span class="sc-bwzfXH hjTDZn react-toggle "><input type="checkbox" id="toggle-2" name="toggle-2" value=""/><label for="toggle-2" class="sc-bdVaJa bDWFJH"></label></span>Right label</label></div></div><div class="css-4qwwu"><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></button></div></div><div class="css-65z50w"><div data-testid="live-editor" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:Inconsolata;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false"><label htmlFor="toggle-2">
<Toggle name="toggle-2" />
Right label
</label></textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">label</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">htmlFor</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">toggle-2</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Toggle</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">name</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">toggle-2</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> Right label</span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">label</span><span class="token tag punctuation" style="color:#393A34">></span></div></pre><style type="text/css">
/**
* Reset the text fill color so that placeholder is visible
*/
.npm__react-simple-code-editor__textarea:empty {
-webkit-text-fill-color: inherit !important;
}
/**
* Hack to apply on some CSS on IE10 and IE11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/**
* IE doesn't support '-webkit-text-fill-color'
* So we use 'color: transparent' to make the text transparent on IE
* Unlike other browsers, it doesn't affect caret color in IE
*/
.npm__react-simple-code-editor__textarea {
color: transparent !important;
}
.npm__react-simple-code-editor__textarea::selection {
background-color: #accef7 !important;
color: transparent !important;
}
}
</style></div></div><span><div class="" style="position:absolute;user-select:none;width:10px;height:100%;top:0px;right:-5px;cursor:col-resize"></div></span></div><p class="css-1ftn47p">Or set any <code class="css-ueqitl">label</code> outside</p><div style="position:relative;user-select:auto;margin:0;margin-right:auto;width:100%;height:auto;max-width:100%;min-width:260px;box-sizing:border-box" data-testid="playground"><div class="css-79elbk"><div class="css-nxr1xe"><div data-testid="live-preview" class="css-mxobd5"><label for="toggle-1a">Left label outside</label><span class="sc-bwzfXH hjTDZn react-toggle "><input type="checkbox" id="toggle-1a" name="toggle-1a" value=""/><label for="toggle-1a" class="sc-bdVaJa bDWFJH"></label></span></div></div><div class="css-4qwwu"><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></button></div></div><div class="css-65z50w"><div data-testid="live-editor" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:Inconsolata;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false"><label htmlFor="toggle-1a">Left label outside</label>
<Toggle name="toggle-1a" /></textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">label</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">htmlFor</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">toggle-1a</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain">Left label outside</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">label</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Toggle</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">name</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">toggle-1a</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span></div></pre><style type="text/css">
/**
* Reset the text fill color so that placeholder is visible
*/
.npm__react-simple-code-editor__textarea:empty {
-webkit-text-fill-color: inherit !important;
}
/**
* Hack to apply on some CSS on IE10 and IE11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/**
* IE doesn't support '-webkit-text-fill-color'
* So we use 'color: transparent' to make the text transparent on IE
* Unlike other browsers, it doesn't affect caret color in IE
*/
.npm__react-simple-code-editor__textarea {
color: transparent !important;
}
.npm__react-simple-code-editor__textarea::selection {
background-color: #accef7 !important;
color: transparent !important;
}
}
</style></div></div><span><div class="" style="position:absolute;user-select:none;width:10px;height:100%;top:0px;right:-5px;cursor:col-resize"></div></span></div><div style="position:relative;user-select:auto;margin:0;margin-right:auto;width:100%;height:auto;max-width:100%;min-width:260px;box-sizing:border-box" data-testid="playground"><div class="css-79elbk"><div class="css-nxr1xe"><div data-testid="live-preview" class="css-mxobd5"><span class="sc-bwzfXH hjTDZn react-toggle "><input type="checkbox" id="toggle-2a" name="toggle-2a" value=""/><label for="toggle-2a" class="sc-bdVaJa bDWFJH"></label></span><label for="toggle-2a">Right label outside</label></div></div><div class="css-4qwwu"><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></button></div></div><div class="css-65z50w"><div data-testid="live-editor" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:Inconsolata;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false"><Toggle name="toggle-2a" />
<label htmlFor="toggle-2a">Right label outside</label></textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Toggle</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">name</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">toggle-2a</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">label</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">htmlFor</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">toggle-2a</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain">Right label outside</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">label</span><span class="token tag punctuation" style="color:#393A34">></span></div></pre><style type="text/css">
/**
* Reset the text fill color so that placeholder is visible
*/
.npm__react-simple-code-editor__textarea:empty {
-webkit-text-fill-color: inherit !important;
}
/**
* Hack to apply on some CSS on IE10 and IE11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/**
* IE doesn't support '-webkit-text-fill-color'
* So we use 'color: transparent' to make the text transparent on IE
* Unlike other browsers, it doesn't affect caret color in IE
*/
.npm__react-simple-code-editor__textarea {
color: transparent !important;
}
.npm__react-simple-code-editor__textarea::selection {
background-color: #accef7 !important;
color: transparent !important;
}
}
</style></div></div><span><div class="" style="position:absolute;user-select:none;width:10px;height:100%;top:0px;right:-5px;cursor:col-resize"></div></span></div><h3 id="disable"><a href="#disable" class="css-1r0pe6c">Disable</a></h3><div style="position:relative;user-select:auto;margin:0;margin-right:auto;width:100%;height:auto;max-width:100%;min-width:260px;box-sizing:border-box" data-testid="playground"><div class="css-79elbk"><div class="css-nxr1xe"><div data-testid="live-preview" class="css-mxobd5"><label for="toggle-3">Disabled <span class="sc-bwzfXH hjTDZn react-toggle "><input type="checkbox" id="toggle-3" name="toggle-3" value="" disabled=""/><label for="toggle-3" class="sc-bdVaJa bDWFJH"></label></span></label></div></div><div class="css-4qwwu"><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></button></div></div><div class="css-65z50w"><div data-testid="live-editor" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:Inconsolata;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false"><label htmlFor="toggle-3">
Disabled
<Toggle name="toggle-3" disabled />
</label></textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">label</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">htmlFor</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">toggle-3</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> Disabled</span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Toggle</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">name</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">toggle-3</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">disabled</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">label</span><span class="token tag punctuation" style="color:#393A34">></span></div></pre><style type="text/css">
/**
* Reset the text fill color so that placeholder is visible
*/
.npm__react-simple-code-editor__textarea:empty {
-webkit-text-fill-color: inherit !important;
}
/**
* Hack to apply on some CSS on IE10 and IE11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/**
* IE doesn't support '-webkit-text-fill-color'
* So we use 'color: transparent' to make the text transparent on IE
* Unlike other browsers, it doesn't affect caret color in IE
*/
.npm__react-simple-code-editor__textarea {
color: transparent !important;
}
.npm__react-simple-code-editor__textarea::selection {
background-color: #accef7 !important;
color: transparent !important;
}
}
</style></div></div><span><div class="" style="position:absolute;user-select:none;width:10px;height:100%;top:0px;right:-5px;cursor:col-resize"></div></span></div><h3 id="appearance"><a href="#appearance" class="css-1r0pe6c">Appearance</a></h3><div style="position:relative;user-select:au