$ npm i @aurodesignsystem/auro-formkit

Every Auro component consists of a JavaScript class and a custom element registration. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.

The default import (shown above) handles both steps automatically, registering the component under its standard tag name.

If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.

To do this, import the component class directly and call its register(name) method with a unique name:

// Import the class only
import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
​
// Register with a custom name if desired
AuroInput.register('[custom]-input');

This will create a new custom element <custom-input> that behaves exactly like <auro-input>, allowing both to coexist on the same page without interfering with each other.

<custom-input>
  <span slot="label">Label</span>
  <span slot="helpText">Help Text</span>
</custom-input>

Warning: Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.

$ npm i @aurodesignsystem/auro-formkit

Once installed, the component can be used in your project by importing the component's registered module:

import '@aurodesignsystem/auro-formkit/auro-input';

This import registers the <auro-input> custom element globally. You can then use it in your HTML:

<auro-input>
  <span slot="label">Enter your name</span>
</auro-input>

Warning: CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.

Add the following script tag to your HTML to load the component directly from a CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-input/+esm"></script>

This script registers the <auro-input> custom element globally. You can then use it in your HTML:

<auro-input>
  <span slot="label">Enter your name</span>
</auro-input>

import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
​
AuroInput.register('[custom]-input');

import type { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
​
declare global {
  namespace JSX {
    interface IntrinsicElements {
      '[custom]-input': React.HTMLAttributes<AuroInput> & Partial<AuroInput>;
    }
  }
}

import { useRef, useEffect } from 'react';
​
function MyInput() {
  const inputRef = useRef<HTMLElement>(null);
​
  useEffect(() => {
    const el = inputRef.current;
    if (!el) return;
​
    const handleInput = () => {
      console.log('Current value:', (el as any).value);
    };
​
    el.addEventListener('input', handleInput);
    return () => el.removeEventListener('input', handleInput);
  }, []);
​
  return (
    <custom-input ref={inputRef}>
      <span slot="label">Enter your name</span>
    </custom-input>
  );
}

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}