The agnostic-astro package utilizes XElement under-the-hood in order to provide build-time Astro components. These build-time components will help your project get closer to realizing a mostly no client-side runtime…if you do it right, this should mean an all-green 100% Lighthouse performance score! Leverage the benefits of Islands architecture by sending mostly server built agnostic-astro components. Then, sprinkle client-hydrated ones only as needed.

Ensure you've installed the agnostic-astro npm package (note this installs depedency agnostic-css as well):

npm i agnostic-astro

and then import common.min.css from your “base layout” (you should only need to do this in once place as this is global CSS). This brings in the required CSS custom properties, reset, and properties:

import 'agnostic-css/public/css-dist/common.min.css';

Then you can import Astro Switch component:

import AgSwitch from 'agnostic-astro/Switch.astro';

Here's the agnostic-astro Switch component in use:

<form>
  <AgSwitch uniqueId="switch-2" label="Small" size="small" />
  <AgSwitch uniqueId="switch-1" label="Default switch" />
  <AgSwitch uniqueId="switch-2" label="Large" size="large" />
  <AgSwitch uniqueId="switch-1" label="Bordered" isBordered />
  <AgSwitch uniqueId="switch-1" label="Action" isAction />
  <AgSwitch uniqueId="switch-1" label="Action Bordered" isBordered isAction />
  <AgSwitch uniqueId="switch-1" label="Label on Right" isLabelRight />
</form>
<script>
// In React, Vue, or Svelte we don't need the data attribute and just
// scope this to the component without having to query all in the DOM
// But for agnostic-astro you will want to do something similar as I have here
const switchesElements = document.querySelectorAll('[data-agnostic-switch]')
const handleClickEvent = (evt) => {
  const el = evt.target
  if (el.getAttribute('aria-checked') == 'true') {
    el.setAttribute('aria-checked', 'false')
  } else {
    el.setAttribute('aria-checked', 'true')
  }
}
for (let i = 0; i < switchesElements.length; i++) {
  switchesElements[i].addEventListener('click', handleClickEvent)

  switchesElements[i].addEventListener('keypress', function (ev) {
    const keyCode = ev.keyCode || ev.which
    switch (keyCode) {
      case 13:
        ev.preventDefault()
        ev.target.click()
        break
    }
  })
}
</script>