$ 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 { AuroDatepicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
​
// Register with a custom name if desired
AuroDatepicker.register('custom-datepicker');

<custom-datepicker>
  <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
</custom-datepicker>

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-datepicker';

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

<auro-datepicker>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.headline">Select Date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

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-datepicker/+esm"></script>

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

<auro-datepicker>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.headline">Select Date</span>
  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
</auro-datepicker>

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

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

import { useRef, useEffect } from 'react';
​
function MyDatePicker() {
  const datepickerRef = useRef<HTMLElement>(null);
​
  useEffect(() => {
    const el = datepickerRef.current;
    if (!el) return;
​
    const handleInput = (event: Event) => {
      console.log('Selected date:', (event as CustomEvent<string>).detail);
    };
​
    el.addEventListener('input', handleInput);
    return () => el.removeEventListener('input', handleInput);
  }, []);
​
  return (
    <custom-datepicker ref={datepickerRef}>
      <span slot="fromLabel">Choose a date</span>
    </custom-datepicker>
  );
}

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

<script lang="ts">
  import { AuroDatePicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
​
  AuroDatePicker.register('[custom]-datepicker');
</script>

<script lang="ts">
  import { AuroDatePicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
​
  AuroDatePicker.register('[custom]-datepicker');
​
  let datepickerValue = $state<string>('');
</script>
<custom-datepicker value={datepickerValue}>
  <span slot="fromLabel">Choose a date</span>
</custom-datepicker>

import type { AuroDatePicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
​
declare namespace svelteHTML {
  interface IntrinsicElements {
    '[custom]-datepicker': Partial<AuroDatePicker> & svelteHTML.HTMLAttributes<AuroDatePicker>;
  }
}

<script lang="ts">
  let value = $state('');
​
  function handleInput(e: Event) {
    value = (e as CustomEvent<string>).detail;
  }
</script>
<custom-datepicker oninput={handleInput}>
  <span slot="fromLabel">Choose a date</span>
</custom-datepicker>
<p>Selected: {value}</p>

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