Toggle examples

Show params

Params

params:
- name: isSwitch
  type: boolean
  required: false
  description: Defaults to `false`. If `true` the button has role `switch` and has `aria-checked` instead of `aria-pressed`.
- name: pressed
  type: boolean
  required: false
  description: Defaults to `false`. If `true` the button informs the screenreader that the button is pressed.
- name: onState
  type: object
  required: true
  description: On state elements
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the state. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the state. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the state span tag.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the state span tag.
- name: offState
  type: object
  required: true
  description: Off state elements
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the state. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the state. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the state span tag.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the state span tag.
- name: classes
    type: string
    required: false
    description: Classes to add to the test component span tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the test component span tag.

default

Button like appearance, no change of button text, only changes in visual state

Show code

Macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "classes": "c-button c-button--transparent no-underline",
  "offState": {
    "classes": "",
    "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z\" fill=\"currentColor\"/></svg>Notificar por correo electrónico</span>"
  },
  "onState": {
    "classes": "",
    "html": "Notificar por correo electrónico"
  }
})  }}

Markup

<!-- toggle -->
<div
  x-data="{
    pressed: false,
    offClasses: '',
    onClasses: '',
    toggle() {
      if (this.pressed) {
        return this.unpress()
      }
      this.pressed = true
    },
    unpress() {
      this.pressed = false
    }
  }"
  x-id="['toggle-button']"
  class="relative"
>
  <!-- Button -->
  <button
    x-ref="button"
    x-on:click="toggle()"
      :aria-pressed="pressed ? 'true' : 'false'"
    type="button"
    class="c-button c-button--transparent no-underline"
    :class="pressed ? onClasses : offClasses"  >
    <span :class="pressed ? 'hidden' : ''"><span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"/></svg>Notificar por correo electrónico</span></span>
    <span :class="pressed ? '' : 'hidden'">Notificar por correo electrónico</span>
  </button>
</div>
<!-- /toggle -->

2 icons

Button like appearance, changes of button text, but no text changes for screenreaders

Show code

Macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "classes": "c-button c-button--sm c-button--transparent no-underline",
  "offState": {
    "classes": "",
    "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M13.33 5.5c-.2-.21-.43-.46-.69-.72a.25.25 0 0 0-.18-.08.26.26 0 0 0-.17.07l-1.07 1.07a.24.24 0 0 0 0 .35c.21.21.41.42.61.64a.25.25 0 0 1 0 .34C10.57 8.53 9.11 9.93 7.16 10a.28.28 0 0 0-.17.07l-1.38 1.38a.25.25 0 0 0-.06.25.24.24 0 0 0 .19.17A6.4 6.4 0 0 0 7 12c3.1 0 5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7ZM13.78.22a.75.75 0 0 0-1.06 0l-2.47 2.47a.26.26 0 0 1-.29 0A6.51 6.51 0 0 0 7 2C3.9 2 1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15a18.42 18.42 0 0 0 1.71 1.67.21.21 0 0 1 .09.18.23.23 0 0 1-.07.19L.22 12.72a.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0l12.5-12.5a.75.75 0 0 0 0-1.06Zm-11.61 7a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4a4.18 4.18 0 0 1 1.24.18.26.26 0 0 1 .17.18.27.27 0 0 1-.07.24L4.18 8.76a.26.26 0 0 1-.33 0 16 16 0 0 1-1.68-1.59Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg><span aria-hidden=\"true\">Ocultar heredados del servicio</span><span class=\"sr-only\">Mostrar heredados del servicio</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><g transform=\"scale(3.42857)\"><circle cx=\"7\" cy=\"7\" r=\"2\" fill=\"currentColor\" /><path d=\"m13.47 5.65-.14-.15C12.2 4.28 10.1 2 7 2S1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15C1.8 9.72 3.9 12 7 12s5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7Zm-1.64 1.52C10.53 8.57 9 10 7 10S3.47 8.57 2.17 7.17a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4s3.51 1.41 4.83 2.83a.25.25 0 0 1 0 .34Z\" fill=\"currentColor\"/></g></svg>Mostrar heredados del servicio</span>"
  }
})  }}

Markup

<!-- toggle -->
<div
  x-data="{
    pressed: false,
    offClasses: '',
    onClasses: '',
    toggle() {
      if (this.pressed) {
        return this.unpress()
      }
      this.pressed = true
    },
    unpress() {
      this.pressed = false
    }
  }"
  x-id="['toggle-button']"
  class="relative"
>
  <!-- Button -->
  <button
    x-ref="button"
    x-on:click="toggle()"
      :aria-pressed="pressed ? 'true' : 'false'"
    type="button"
    class="c-button c-button--sm c-button--transparent no-underline"
    :class="pressed ? onClasses : offClasses"  >
    <span :class="pressed ? 'hidden' : ''"><span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M13.33 5.5c-.2-.21-.43-.46-.69-.72a.25.25 0 0 0-.18-.08.26.26 0 0 0-.17.07l-1.07 1.07a.24.24 0 0 0 0 .35c.21.21.41.42.61.64a.25.25 0 0 1 0 .34C10.57 8.53 9.11 9.93 7.16 10a.28.28 0 0 0-.17.07l-1.38 1.38a.25.25 0 0 0-.06.25.24.24 0 0 0 .19.17A6.4 6.4 0 0 0 7 12c3.1 0 5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7ZM13.78.22a.75.75 0 0 0-1.06 0l-2.47 2.47a.26.26 0 0 1-.29 0A6.51 6.51 0 0 0 7 2C3.9 2 1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15a18.42 18.42 0 0 0 1.71 1.67.21.21 0 0 1 .09.18.23.23 0 0 1-.07.19L.22 12.72a.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0l12.5-12.5a.75.75 0 0 0 0-1.06Zm-11.61 7a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4a4.18 4.18 0 0 1 1.24.18.26.26 0 0 1 .17.18.27.27 0 0 1-.07.24L4.18 8.76a.26.26 0 0 1-.33 0 16 16 0 0 1-1.68-1.59Z" fill="currentColor" transform="scale(3.42857)"/></svg><span aria-hidden="true">Ocultar heredados del servicio</span><span class="sr-only">Mostrar heredados del servicio</span></span></span>
    <span :class="pressed ? '' : 'hidden'"><span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><g transform="scale(3.42857)"><circle cx="7" cy="7" r="2" fill="currentColor" /><path d="m13.47 5.65-.14-.15C12.2 4.28 10.1 2 7 2S1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15C1.8 9.72 3.9 12 7 12s5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7Zm-1.64 1.52C10.53 8.57 9 10 7 10S3.47 8.57 2.17 7.17a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4s3.51 1.41 4.83 2.83a.25.25 0 0 1 0 .34Z" fill="currentColor"/></g></svg>Mostrar heredados del servicio</span></span>
  </button>
</div>
<!-- /toggle -->

isSwitch

Switch appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-labelledby.

Show code

Macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "classes": "",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">on</span><span aria-hidden=\"true\" class=\"translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">off</span><span aria-hidden=\"true\" class=\"translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
})  }}

Markup

<!-- toggle -->
<div
  x-data="{
    pressed: false,
    offClasses: '',
    onClasses: '',
    toggle() {
      if (this.pressed) {
        return this.unpress()
      }
      this.pressed = true
    },
    unpress() {
      this.pressed = false
    }
  }"
  x-id="['toggle-button']"
  class="relative"
>
  <!-- Button -->
  <button
    x-ref="button"
    x-on:click="toggle()"
      role = "switch"
      :aria-checked="pressed ? 'true' : 'false'"
    type="button"
    class=""
    :class="pressed ? onClasses : offClasses" aria-labelledby="id-text"  >
    <span :class="pressed ? 'hidden' : ''"><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">on</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span></span>
    <span :class="pressed ? '' : 'hidden'"><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">off</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span></span>
  </button>
</div>
<!-- /toggle -->