Toggle

Mostrar parámetros

Parámetros del componente

              params:
- name: isExpandible
  type: boolean
  required: false
  description: Defaults to `true`. If `true` the button has `aria-expanded` instead of `aria-pressed`.
- 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: id
    type: string
    required: false
    description: Id to add to the toggle element. Not required, but recommended to improve the accessibility.
  - 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.
              
            

Por defecto

Apariencia de botón, sin cambio en el texto del botón, sólo cambia su estado visual. Necesita un elemento externo con un id para referenciarlo con su aria-controls para mostrar/ocultar ese elemento externo.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "classes": "c-button",
  "offState": {
    "classes": "",
    "html": "Mostrar detalles"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "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>Mostrar detalles</span>"
  },
  "attributes": {
    "aria-controls": "id-panel-oculto"
  }
}) }}

Expandir con javascript

También puedes usar con javascript la función global activateItemToggle(element, open), para expandir un item , usando su id, el parámetro open admite true o false, si le pasamos true se mostrará expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe activateItemToggle("toggle-expanded-js", true) para mostrar el item actual expandido.

Mostrar códigodel ejemplo: Expandir con javascript

Contenido

Nunjucks macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "classes": "c-button",
  "id": "toggle-expanded-js",
  "offState": {
    "classes": "",
    "html": "Mostrar detalles"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "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>Mostrar detalles</span>"
  }
}) }}

2 iconos

Apariencia de botón, sin cambio en el texto del botón, sólo cambian sus iconos. Necesita un elemento externo con un id para referenciarlo con su aria-controls para mostrar/ocultar ese elemento externo.

Mostrar códigodel ejemplo: 2 iconos

Contenido

Nunjucks macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "classes": "c-button c-button--sm",
  "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.71 2.3a1.45 1.45 0 0 0 .14-1.51A1.41 1.41 0 0 0 12.57 0H1.43A1.4 1.4 0 0 0 .15.8a1.43 1.43 0 0 0 .16 1.52l5.13 6.32a.25.25 0 0 1 .06.16v4.7a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.8a.25.25 0 0 1 .06-.16ZM7.6 6.65a.29.29 0 0 1-.2.09h-.8a.29.29 0 0 1-.2-.09L3 2.41a.26.26 0 0 1 0-.27.26.26 0 0 1 .15-.14h7.7a.26.26 0 0 1 .22.14.26.26 0 0 1 0 .27Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Mostrar filtros</span>"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "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.9.8a.51.51 0 0 0 0-.52.51.51 0 0 0-.4-.28H.5a.51.51 0 0 0-.45.28A.51.51 0 0 0 .1.8l5.19 6.79a1 1 0 0 1 .21.61v5.3a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.2a1 1 0 0 1 .21-.61Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Mostrar filtros</span>"
  },
  "attributes": {
    "aria-controls": "id-panel-oculto"
  }
}) }}

No expandible

Usa "isExpandible": false. En lugar de usar aria-expanded usará aria-pressed.

Mostrar códigodel ejemplo: No expandible

Contenido

Nunjucks macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "isExpandible": false,
  "classes": "c-button",
  "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=\"M6.41 10.78a.25.25 0 0 0 0 .34l2.16 2.41a1.35 1.35 0 0 0 .8.27 1.31 1.31 0 0 0 1.31-1.31V7.12a.26.26 0 0 0-.43-.18ZM.26 13.81a.76.76 0 0 0 1 0l12.5-12.5a.76.76 0 0 0 .18-.31.71.71 0 0 0 .06-.24.73.73 0 0 0-.19-.49.74.74 0 0 0-1.06 0l-2 2a.26.26 0 0 1-.19.07.25.25 0 0 1-.18-.08 1.23 1.23 0 0 0-1-.45 1.29 1.29 0 0 0-.8.27L5.74 5.21a.23.23 0 0 1-.19.09H4.42a1.75 1.75 0 0 0-1.75 1.75v1.5A1.78 1.78 0 0 0 3 9.61a.25.25 0 0 1 0 .33L.22 12.73a.75.75 0 0 0 0 1.06Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Reproducir sonido</span>"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "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=\"M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/><path d=\"M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Reproducir sonido</span>"
  }
}) }}

Pressed con javascript

También puedes usar con javascript la función global activateItemToggle(element, toggle), para expandir un item , usando su id, el parámetro toggle admite true o false, si le pasamos true se mostrará expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe activateItemToggle("toggle-pressed-js", true) para mostrar el item actual expandido.

Mostrar códigodel ejemplo: Pressed con javascript

Contenido

Nunjucks macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "isExpandible": false,
  "classes": "c-button",
  "id": "toggle-pressed-js",
  "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=\"M6.41 10.78a.25.25 0 0 0 0 .34l2.16 2.41a1.35 1.35 0 0 0 .8.27 1.31 1.31 0 0 0 1.31-1.31V7.12a.26.26 0 0 0-.43-.18ZM.26 13.81a.76.76 0 0 0 1 0l12.5-12.5a.76.76 0 0 0 .18-.31.71.71 0 0 0 .06-.24.73.73 0 0 0-.19-.49.74.74 0 0 0-1.06 0l-2 2a.26.26 0 0 1-.19.07.25.25 0 0 1-.18-.08 1.23 1.23 0 0 0-1-.45 1.29 1.29 0 0 0-.8.27L5.74 5.21a.23.23 0 0 1-.19.09H4.42a1.75 1.75 0 0 0-1.75 1.75v1.5A1.78 1.78 0 0 0 3 9.61a.25.25 0 0 1 0 .33L.22 12.73a.75.75 0 0 0 0 1.06Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Reproducir sonido</span>"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "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=\"M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/><path d=\"M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Reproducir sonido</span>"
  }
}) }}

Pressed

Usa "pressed": true para activarlo inicialmente.

Mostrar códigodel ejemplo: Pressed

Contenido

Nunjucks macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "pressed": true,
  "classes": "c-button",
  "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=\"M6.41 10.78a.25.25 0 0 0 0 .34l2.16 2.41a1.35 1.35 0 0 0 .8.27 1.31 1.31 0 0 0 1.31-1.31V7.12a.26.26 0 0 0-.43-.18ZM.26 13.81a.76.76 0 0 0 1 0l12.5-12.5a.76.76 0 0 0 .18-.31.71.71 0 0 0 .06-.24.73.73 0 0 0-.19-.49.74.74 0 0 0-1.06 0l-2 2a.26.26 0 0 1-.19.07.25.25 0 0 1-.18-.08 1.23 1.23 0 0 0-1-.45 1.29 1.29 0 0 0-.8.27L5.74 5.21a.23.23 0 0 1-.19.09H4.42a1.75 1.75 0 0 0-1.75 1.75v1.5A1.78 1.78 0 0 0 3 9.61a.25.25 0 0 1 0 .33L.22 12.73a.75.75 0 0 0 0 1.06Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Reproducir sonido</span>"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "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=\"M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/><path d=\"M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Reproducir sonido</span>"
  }
}) }}

Isswitch

Apariencia de Switch con "isSwitch": true, sin cambio en el texto, sólo cambia su estado visual. Necesita un elemento externo con un id para referenciarlo con su aria-labelledby.

Mostrar códigodel ejemplo: Isswitch

Contenido

Nunjucks macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer 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-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 class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer 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-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 class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}

Isswitch pressed

Usa "pressed": true para activarlo inicialmente.

Mostrar códigodel ejemplo: Isswitch pressed

Contenido

Nunjucks macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
  "pressed": true,
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer 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-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 class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer 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-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 class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}

Isswitch con javascript

También puedes usar con javascript la función global activateItemToggle(element, toggle), para modificar el estado del Switch, usando su id, el parámetro toggle admite true o false, si le pasamos true se mostrará activado, y si le pasamos false se mostrará desactivado. Ej: Abre la consola del navegador y escribe activateItemToggle("toggle-switch-js", true) para mostrar el switch activado.

Mostrar códigodel ejemplo: Isswitch con javascript

Contenido

Nunjucks macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
  "id": "toggle-switch-js",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer 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-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 class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer 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-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 class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}

Isswitch peque

Mostrar códigodel ejemplo: Isswitch peque

Contenido

Nunjucks macro

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-xs\" aria-hidden=\"true\">Off</span><span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-neutral-base rounded-full cursor-pointer 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-0 pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span><span class=\"text-xs\" aria-hidden=\"true\">On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-xs\" aria-hidden=\"true\">Off</span><span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-primary-base rounded-full cursor-pointer 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-4 pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span><span class=\"text-xs\" aria-hidden=\"true\">On</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}