1"use strict";(self.webpackChunkpatternfly_org=self.webpackChunkpatternfly_org||[]).push([[22807],{36902:(e,a,t)=>{t.r(a),t.d(a,{default:()=>i});var l=t(2784),c=t(66159);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var l in t)Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l])}return e},s.apply(this,arguments)}const n={id:"Switch",section:"components",subsection:"",deprecated:!1,template:!1,beta:!1,demo:!1,newImplementationLink:!1,source:"html",tabName:null,slug:"/components/switch/html",sourceLink:"https://github.com/patternfly/patternfly/blob/main/src/patternfly/components/Switch/examples/Switch.md",relPath:"node_modules/@patternfly/patternfly/docs/components/Switch/examples/Switch.md",cssPrefix:["pf-v6-c-switch"],examples:["Basic","Reverse (toggle on right)","Label and check icon","Without visible text label","Disabled"]};n.examples={Basic:e=>l.createElement(c.en,s({},n,e,{code:'<label class="pf-v6-c-switch" for="switch-with-label-1">\n <input\n class="pf-v6-c-switch__input"\n type="checkbox"\n role="switch"\n id="switch-with-label-1"\n aria-labelledby="switch-with-label-1-text"\n checked\n />\n\n <span class="pf-v6-c-switch__toggle"></span>\n\n <span\n class="pf-v6-c-switch__label"\n id="switch-with-label-1-text"\n aria-hidden="true"\n >Togglable option in basic example</span>\n</label>',title:"Basic",lang:"html",className:""})),"Reverse (toggle on right)":e=>l.createElement(c.en,s({},n,e,{code:'<label class="pf-v6-c-switch pf-m-reverse" for="switch-reverse-1">\n <input\n class="pf-v6-c-switch__input"\n type="checkbox"\n role="switch"\n id="switch-reverse-1"\n aria-labelledby="switch-reverse-1-text"\n checked\n />\n\n <span class="pf-v6-c-switch__toggle"></span>\n\n <span\n class="pf-v6-c-switch__label pf-m-on"\n id="switch-reverse-1-text"\n aria-hidden="true"\n >Togglable option in reverse example</span>\n</label>',title:"Reverse (toggle on right)",lang:"html",className:""})),"Label and check icon":e=>l.createElement(c.en,s({},n,e,{code:'<label class="pf-v6-c-switch" for="switch-label-check-1">\n <input\n class="pf-v6-c-switch__input"\n type="checkbox"\n role="switch"\n id="switch-label-check-1"\n aria-labelledby="switch-label-check-1-text"\n checked\n />\n\n <span class="pf-v6-c-switch__toggle">\n <span class="pf-v6-c-switch__toggle-icon">\n <i class="fas fa-check" aria-hidden="true"></i>\n </span>\n </span>\n <span\n class="pf-v6-c-switch__label pf-m-on"\n id="switch-label-check-1-text"\n aria-hidden="true"\n >Togglable option in check icon example</span>\n</label>',title:"Label and check icon",lang:"html",className:""})),"Without visible text label":e=>l.createElement(c.en,s({},n,e,{code:'<label class="pf-v6-c-switch" for="switch-with-icon-1">\n <input\n class="pf-v6-c-switch__input"\n type="checkbox"\n role="switch"\n id="switch-with-icon-1"\n aria-label="Togglable option in no text label example"\n checked\n />\n\n <span class="pf-v6-c-switch__toggle">\n <span class="pf-v6-c-switch__toggle-icon">\n <i class="fas fa-check" aria-hidden="true"></i>\n </span>\n </span>\n</label>',title:"Without visible text label",lang:"html",className:""})),Disabled:e=>l.createElement(c.en,s({},n,e,{code:'<label class="pf-v6-c-switch" for="switch-disabled-1">\n <input\n class="pf-v6-c-switch__input"\n type="checkbox"\n role="switch"\n id="switch-disabled-1"\n aria-labelledby="switch-disabled-1-text"\n disabled\n checked\n />\n\n <span class="pf-v6-c-switch__toggle"></span>\n\n <span\n class="pf-v6-c-switch__label"\n id="switch-disabled-1-text"\n aria-hidden="true"\n >Togglable option in disabled example</span>\n</label>\n\n<br />\n<br />\n<label class="pf-v6-c-switch" for="switch-disabled-2">\n <input\n class="pf-v6-c-switch__input"\n type="checkbox"\n role="switch"\n id="switch-disabled-2"\n aria-labelledby="switch-disabled-2-text"\n disabled\n />\n\n <span class="pf-v6-c-switch__toggle"></span>\n\n <span\n class="pf-v6-c-switch__label"\n id="switch-disabled-2-text"\n aria-hidden="true"\n >Togglable option in basic example</span>\n</label>\n\n<br />\n<br />\n<label class="pf-v6-c-switch" for="switch-with-icon-disabled-1">\n <input\n class="pf-v6-c-switch__input"\n type="checkbox"\n role="switch"\n id="switch-with-icon-disabled-1"\n aria-label="Togglable option in disabled icon example"\n disabled\n checked\n />\n\n <span class="pf-v6-c-switch__toggle">\n <span class="pf-v6-c-switch__toggle-icon">\n <i class="fas fa-check" aria-hidden="true"></i>\n </span>\n </span>\n</label>\n\n<br />\n<br />\n<label class="pf-v6-c-switch" for="switch-with-icon-disabled-2">\n <input\n class="pf-v6-c-switch__input"\n type="checkbox"\n role="switch"\n id="switch-with-icon-disabled-2"\n aria-label="Togglable option in disabled icon example"\n disabled\n />\n <span class="pf-v6-c-switch__toggle">\n <span class="pf-v6-c-switch__toggle-icon">\n <i class="fas fa-check" aria-hidden="true"></i>\n </span>\n </span>\n</label>',title:"Disabled",lang:"html",className:""}))};const r=()=>l.createElement(l.Fragment,null,l.createElement(c.sg,{id:"examples",headingLevel:"h2",className:"ws-title ws-h2"},"Examples"),l.createElement(n.examples.Basic),l.createElement(n.examples["Reverse (toggle on right)"]),l.createElement(n.examples["Label and check icon"]),l.createElement(n.examples["Without visible text label"]),l.createElement(n.examples.Disabled),l.createElement(c.sg,{id:"documentation",headingLevel:"h2",className:"ws-title ws-h2"},"Documentation"),l.createElement(c.sg,{id:"overview",headingLevel:"h3",className:"ws-title ws-h3"},"Overview"),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"A switch is an alternative to the checkbox component."),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"Use a switch when your user needs to perform instantaneous actions without confirmation."),l.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"Use checkbox if your user has to perform additional steps for changes to become effective."),l.createElement(c.sg,{id:"accessibility",headingLevel:"h3",className:"ws-title ws-h3"},"Accessibility"),l.createElement("table",{className:"ws-table pf-v6-c-table pf-m-gr
1id-lg pf-m-compact",role:"grid"},l.createElement("thead",{className:"pf-v6-c-table__thead"},l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("th",{className:"undefined pf-v6-c-table__th pf-m-wrap",role:"columnheader",scope:"col"},l.createElement("div",{className:""},"Attribute")),l.createElement("th",{className:"undefined pf-v6-c-table__th pf-m-wrap",role:"columnheader",scope:"col"},l.createElement("div",{className:""},"Applied to")),l.createElement("th",{className:"undefined pf-v6-c-table__th pf-m-wrap",role:"columnheader",scope:"col"},l.createElement("div",{className:""},"Outcome")))),l.createElement("tbody",{role:"rowgroup",className:"pf-v6-c-table__tbody"},l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Attribute"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},'aria-labelledby="..."')," or ",l.createElement("code",{className:"ws-code "},'aria-label="..."'))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__input"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Indicates the behavior of the switch. This label should never dynamically change, and should always describe the behavior of the switch when its checked state is true. If an additional text label is included with the switch besides ",l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__label"),", then ",l.createElement("code",{className:"ws-code "},"aria-labelledby")," can reference the ",l.createElement("code",{className:"ws-code "},"id")," of this text, but it must be in addition to the text of ",l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__label"),". If there is no visible text label provided, then an ",l.createElement("code",{className:"ws-code "},"aria-label")," must be provided. ",l.createElement("strong",{className:""},"Required")))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Attribute"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},"for"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},"<label>"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Each ",l.createElement("code",{className:"ws-code "},"<label>")," must have a ",l.createElement("code",{className:"ws-code "},"for")," attribute that matches its input id. ",l.createElement("strong",{className:""},"Required")))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Attribute"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},"id"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},'<input type="checkbox">'))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Each ",l.createElement("code",{className:"ws-code "},"<input>")," must have an ",l.createElement("code",{className:"ws-code "},"id")," attribute that matches its label's ",l.createElement("code",{className:"ws-code "},"for")," value. ",l.createElement("strong",{className:""},"Required")))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Attribute"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},'role="switch"'))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},'<input type="checkbox">'))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Exposes the element as a switch for assistive technologies. ",l.createElement("strong",{className:""},"Required")))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Attribute"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},"id"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__label"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Each ",l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__label")," must have an ",l.createElement("code",{className:"ws-code "},"id")," attribute that matches the ",l.createElement("code",{className:"ws-code "},"aria-labelledby")," on ",l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__input"),"."))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Attribute"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},"checked"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__input"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Indicates that the input is checked"))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Attribute"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},"disabled"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__input"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Indicates that the input is disabled"))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Attribute"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},'aria-hidden="true"'))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__label"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Hides the text from the screen reader."))))),l.createElement(c.sg,{id:"usage",headingLevel:"h3",className:"ws-title ws-h3"},"Usage"),l.createElement("table",{className:"ws-table pf-v6-c-table pf-m-gr
1id-lg pf-m-compact",role:"grid"},l.createElement("thead",{className:"pf-v6-c-table__thead"},l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("th",{className:"undefined pf-v6-c-table__th pf-m-wrap",role:"columnheader",scope:"col"},l.createElement("div",{className:""},"Class")),l.createElement("th",{className:"undefined pf-v6-c-table__th pf-m-wrap",role:"columnheader",scope:"col"},l.createElement("div",{className:""},"Applied to")),l.createElement("th",{className:"undefined pf-v6-c-table__th pf-m-wrap",role:"columnheader",scope:"col"},l.createElement("div",{className:""},"Outcome")))),l.createElement("tbody",{role:"rowgroup",className:"pf-v6-c-table__tbody"},l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Class"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-v6-c-switch"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},"<label>"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Initiates a switch. ",l.createElement("strong",{className:""},"Required")))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Class"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__input"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},'<input type="checkbox">'))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Hide the checkbox inside the switch. ",l.createElement("strong",{className:""},"Required")))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Class"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__toggle"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},"<span>"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Initiates the toggle inside the switch. ",l.createElement("strong",{className:""},"Required")))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Class"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__toggle-icon"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},"<span>"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Initiates the switch toggle icon wrapper. ",l.createElement("strong",{className:""},"Required when the switch is used without a label")))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Class"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-v6-c-switch__label"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},"<span>"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Initiates a label inside the switch."))),l.createElement("tr",{role:"row",className:"pf-v6-c-table__tr"},l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Class"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-m-reverse"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Applied to"},l.createElement("div",{className:""},l.createElement("code",{className:"ws-code "},".pf-v6-c-switch"))),l.createElement("td",{role:"cell",className:"pf-v6-c-table__td","data-label":"Outcome"},l.createElement("div",{className:""},"Positions the switch toggle to the right of the label."))))));r.displayName="ComponentsSwitchHtmlDocs",r.pageData=n;const i=r}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.