<pf-switch> is a switch that toggles the state of a setting (between on and
off). Switches provide a more explicit, visible representation on a setting.
Read more about Switch in the PatternFly Elements Switch documentation
Load <pf-switch> via CDN:
<script src="https://jspm.dev/@patternfly/elements/pf-switch/pf-switch.js"></script>Or, if you are using NPM, install it
npm install @patternfly/elementsThen once installed, import it to your application:
import '@patternfly/elements/pf-switch/pf-switch.js';For <pf-switch> to work in Safari, you'll need to load the element-internals-polyfill. Safari is in the process of adding element internals to WebKit so this polyfill should be temporary.
<pf-switch id="switch"></pf-switch>
<label for="switch" data-state="on">Message when on</label>
<label for="switch" data-state="off" hidden>Message when off</label><pf-switch> is a form-associated custom element. That means that it can
participate in HTML forms just like a native <input>. For example, if you add
the name attribute, or the id attribute, the element will appear in the
FormData object. For example, if you add the name attribute, or the id
attribute, the element will appear in the FormData object.
<form>
<label> Dark Mode
<pf-switch name="dark"></pf-switch>
</label>
<script>
document.currentScript.closest('form').addEventListener('submit', function() {
console.log(this.elements.dark) // <pf-switch>
})
</script>
</form><pf-switch></pf-switch><pf-switch show-check-icon></pf-switch>
<label for="switch" data-state="on">Message when on</label>
<label for="switch" data-state="off" hidden>Message when off</label><form>
<fieldset>
<legend>Checked and Disabled</legend>
<pf-switch id="checked-disabled" checked disabled></pf-switch>
<label for="checked-disabled" data-state="on">Message when on</label>
<label for="checked-disabled" data-state="off">Message when off</label>
</fieldset>
<fieldset>
<pf-switch id="disabled" disabled></pf-switch>
<label for="disabled" data-state="on">Message when on</label>
<label for="disabled" data-state="off">Message when off</label>
</fieldset>
</form>