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 and setup the AgnosticUI Astro integration which will import the required common.min.css onto your page:

npm i astro-agnosticui

Then add the integration to your astro.config.mjs (you may need to run Astro with experimental integrations flag astro dev --experimental-integrations):

import { defineConfig } from 'astro/config';
import agnosticAstro from 'astro-agnosticui';;
export default defineConfig({
  integrations: [agnosticAstro()]
});

Then you can import Astro Switch component (agnostic-astro ships with the astro-agnosticui integration):

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>