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 Input component (agnostic-astro ships with the astro-agnosticui integration):

import AgInput from 'agnostic-astro/Input.astro';

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

<form>
  <AgInput class="mbe24" label="Input label" uniqueId="input-default" placeholder="Enter some text…" />
  <AgInput class="mbe24" label="Input rounded label" uniqueId="input-rounded" isRounded placeholder="Enter some text…" />
  <AgInput class="mbe24" label="Input readonly" uniqueId="input-readonly" readonly isRounded placeholder="Enter some text…" />
  <AgInput class="mbe24" label="Input disabled" uniqueId="input-disabled" disabled isRounded placeholder="Enter some text…" />
  <AgInput class="mbe24" label="Input small" size="small" uniqueId="input-small" placeholder="Enter some text…" />
  <AgInput class="mbe24" label="Input large" size="large" uniqueId="input-large" placeholder="Enter some text…" />
  <AgInput class="mbe24" label="Input underlined" isUnderlined uniqueId="input-underlined" placeholder="Enter some text…" />
  <AgInput class="mbe24" label="Input underlined w/background" isUnderlined isUnderlinedBackground uniqueId="input-underlined-bg" placeholder="Enter some text…" />
  <AgInput class="mbe24" label="Input underlined w/background large" isUnderlined isUnderlinedBackground size="large" uniqueId="input-underlined-bg-large" placeholder="Enter some text…" />
  <div class="mbs8" />
  <AgInput class="mie16" label="Input inline" isInlined uniqueId="input-inlined" placeholder="Enter some text…" />
  <AgInput class="mie16" label="Input inline and underlined" isInlined isUnderlined uniqueId="input-inlined-underlined" placeholder="Enter some text…" />
  <div class="mbs24" />
  <AgInput hasLeftAddon hasRightAddon label="Input with addon" uniqueId="input-addons" placeholder="Enter some text…" >
    <div slot="addon-left" class="input-addon-left">
      <AgIcon type="success" size="18">
        <svg>
          <use xlink:href="#icon-checkmark3"></use>
        </svg> 
      </AgIcon>
    </div>
    <div slot="addon-right" class="input-addon-right">
      <AgIcon type="error" size="18">
        <svg>
          <use xlink:href="#icon-cross2"></use>
        </svg> 
      </AgIcon>
    </div>
  </AgInput>
</form>
<script>
  // There are many ways to listen for input events; this is just one
  // pedantic way built atop of good ole' platform JavaScript ;-)
  const inputElement = document.getElementById('inputTest');
  inputElement.addEventListener('input', (event) => {
    const value = event.target.value;
    if (value) {
      inputResult.textContent = value;
    } else {
      // They may have cleared out the text so reset
      inputResult.textContent = 'Type in the input below: ';
    }
  });
</script>

HTML5 provides a plethora of input types. AgnosticUI generally takes a minimalistic and backseat approach to these various types. Generally, input types that somehow seem similar to a text input like email, password, search, etc., will at least share the text input's general appearance in terms of height, spacing, font size, etc., if you've added AgnosticUI classes to it. But, we attempt to be as unobtrusive as possible towards the underlying native functionality. For example, we do not remove or replace the native 'X' or clear button for type search. If you're application needs such mangling, we hope that AgnosticUI at least provides some helpful scaffolding to build on top of.

Also, unlike a classless framework, AgnosticUI will only affect those elements where you've declaritively added our CSS hooks. Put differently, an email input with no AgnosticUI classes will behave and appear in an unadulterated fashion. If you'd like it to add AgnosticUI's general input look and feel, simply add the input class to it. Here are some examples of that.

<form>
  <AgInput class="mbe16" uniqueId="input-email" type="email" label="Email" placeholder="your.email@gmail.com" />
  <AgInput class="mbe16" uniqueId="input-password" type="password" label="Password" />
  <AgInput class="mbe16" uniqueId="input-search" type="search" label="Search" placeholder="Search…" />
  <AgInput class="mbe16" uniqueId="input-tel" type="tel" label="Telephone" placeholder="Telephone…" />
  <AgInput class="mbe16" uniqueId="input-number" type="number" label="Number" placeholder="Enter a number…" min="10" max="30" step="5" />
      </form>

<AgInput helpText="This is some helpful text to help the user" uniqueId="input-help-hints" label="Field hints" placeholder="Helpt hints" />
<div class="mbe16" />
<AgInput isInvalid invalidText="There's an error on this field" uniqueId="input-error-hints" label="Field hints" placeholder="Error hints" />
<div class="mbe16" />
<AgInput size="small" isInvalid invalidText="There's an error on this field" uniqueId="input-error-hints-small" label="Small" placeholder="Field hints" />
<div class="mbe16" />
<AgInput size="large" isInvalid invalidText="There's an error on this field" uniqueId="input-error-hints-large" label="Large" placeholder="Field hints" />