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.

AgnosticUI requires the import of the common.min.css from your Astro base layout:

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

Then you can import Astro ChoiceInput component:

import AgChoiceInput from 'agnostic-astro/ChoiceInput.astro';

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

<AgChoice uniqueId="choice1" legendLabel="Choice legend label" options={
  [
    {
      name: "frequency",
      value: "daily",
      label: "Daily",
    },
    {
      name: "frequency",
      value: "weekly",
      label: "Weekly",
    },
    {
      name: "frequency",
      value: "monthly",
      label: "Monthly",
    }
  ]
} />
<AgChoice uniqueId="choice1" legendLabel="Disabled Options" disabledOptions={["monthly", "weekly"]} 
  options={
  [
    {
      name: "when",
      value: "daily",
      label: "Daily",
    },
    {
      name: "when",
      value: "weekly",
      label: "Weekly",
    },
    {
      name: "when",
      value: "monthly",
      label: "Monthly",
    },
    {
      name: "when",
      value: "yearly",
      label: "Yearly",
    }
  ]
} />
<AgChoice uniqueId="choice1" legendLabel="Prechecked Options" checkedOptions={["weekly"]} 
  options={
  [
    {
      name: "precheckedExample",
      value: "daily",
      label: "Daily",
    },
    {
      name: "precheckedExample",
      value: "weekly",
      label: "Weekly",
    }
  ]
} />

<AgChoice uniqueId="radios" legendLabel="Choice legend label (radios)" type="radio" options={
  [
    {
      name: "howOften",
      value: "daily",
      label: "Daily",
    },
    {
      name: "howOften",
      value: "weekly",
      label: "Weekly",
    },
    {
      name: "howOften",
      value: "monthly",
      label: "Monthly",
    }
  ]
} />
<!-- Consumer is responsible for passing checkedOptions as array of size one when type is radio as radios can only have
a single radio checked at any given time. Not doing so will result in results undefined ;) -->
<AgChoice uniqueId="radios" legendLabel="Choice (prechecked radio)" type="radio" checkedOptions=['weekly'] options={
  [
    {
      name: "precheckedRadio",
      value: "daily",
      label: "Daily",
    },
    {
      name: "precheckedRadio",
      value: "weekly",
      label: "Weekly",
    },
    {
      name: "precheckedRadio",
      value: "monthly",
      label: "Monthly",
    }
  ]
} />