Basic Switch Button A switch button handles boolean functions that happen instantly. Important Notes: Switch Button should be used to handle changes that happen instantly. It should not be used in a form which requires a submit action. For rendering boolean options within a form, use a checkbox input instead. The label prop can accept anything. For better control of text styling, pass the headline component into the label prop. Set the headline’s tag prop to span since headings are not allowed in a label. The component does not ship with JavaScript. Reference the sample code snippet below to see how to toggle on/off state with the aria-checked attribute. When writing HTML, make sure to follow the sample code snippet below and render all neccessary id, class, and attributes on the <label> and the <button> elements. Demo
Twig
{% include '@bolt-components-switch-button/switch-button.twig' with {
  label: 'Toggle me',
  attributes: {
    class: 'js-target-the-switch-button-container'
  },
} only %}
HTML
<label class="js-target-the-switch-button-container c-bolt-switch-button" for="bolt-switch-button-123">
  <div class="c-bolt-switch-button__label">Toggle me</div>
  <button class="c-bolt-switch-button__button" type="button" id="bolt-switch-button-123" role="switch" aria-checked="false">
    <span class="c-bolt-switch-button__button-text c-bolt-switch-button__button-text--checked">on</span>
    <span class="c-bolt-switch-button__button-text c-bolt-switch-button__button-text--unchecked ">off</span>
  </button>
</label>
JavaScript
const switchButton = document.querySelector(
  '.js-target-the-switch-button-container button[role="switch"]',
);

switchButton.addEventListener('click', e => {
  const el = e.target;
  const isChecked = el.getAttribute('aria-checked') === 'true';

  el.setAttribute('aria-checked', isChecked ? false : true);
});