$ 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 classes
import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
import { AuroMenu } from '@aurodesignsystem/auro-formkit/auro-menu/class';
import { AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menuoption/class';
​
// Register each component with a custom name
AuroSelect.register('[custom]-select');
AuroMenu.register('[custom]-menu');
AuroMenuOption.register('[custom]-menuoption');

<custom-select placeholder="Placeholder Text" id="custom-select">
  <span slot="bib.fullscreen.headline">Bib Headline</span>
  <span slot="label">Label</span>
  <custom-menu>
    <custom-menuoption value="stops">Stops</custom-menuoption>
    <custom-menuoption value="price">Price</custom-menuoption>
    <custom-menuoption value="duration">Duration</custom-menuoption>
    <custom-menuoption value="departure">Departure</custom-menuoption>
    <custom-menuoption value="arrival">Arrival</custom-menuoption>
    <custom-menuoption value="prefer alaska">Prefer Alaska</custom-menuoption>
  </custom-menu>
</custom-select>

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

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

<auro-select id="default-select">
  <span slot="label">Choose an option</span>
  <auro-menu>
    <auro-menuoption value="option1">Option 1</auro-menuoption>
    <auro-menuoption value="option2">Option 2</auro-menuoption>
  </auro-menu>
</auro-select>

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

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

<auro-select id="cdn-select">
  <span slot="label">Choose an option</span>
  <auro-menu>
    <auro-menuoption value="option1">Option 1</auro-menuoption>
    <auro-menuoption value="option2">Option 2</auro-menuoption>
  </auro-menu>
</auro-select>

import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
​
AuroSelect.register('[custom]-select');
AuroMenu.register('[custom]-menu');
AuroMenuOption.register('[custom]-menuoption');

import type { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
import type { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-menu/auro-menu/class';
​
declare global {
  namespace JSX {
    interface IntrinsicElements {
      '[custom]-select': React.HTMLAttributes<AuroSelect> & Partial<AuroSelect>;
      '[custom]-menu': React.HTMLAttributes<AuroMenu> & Partial<AuroMenu>;
      '[custom]-menuoption': React.HTMLAttributes<AuroMenuOption> & Partial<AuroMenuOption>;
    }
  }
}

import { useRef, useEffect } from 'react';
​
const options = [
  { id: 'opt-1', value: 'stops', label: 'Stops' },
  { id: 'opt-2', value: 'price', label: 'Price' },
  { id: 'opt-3', value: 'duration', label: 'Duration' },
  { id: 'opt-4', value: 'departure', label: 'Departure' },
];
​
function MySelect() {
  const selectRef = useRef<HTMLElement>(null);
​
  useEffect(() => {
    const el = selectRef.current;
    if (!el) return;
​
    const handleInput = () => {
      console.log('Selected value:', (el as any).value);
    };
​
    el.addEventListener('input', handleInput);
    return () => el.removeEventListener('input', handleInput);
  }, []);
​
  return (
    <custom-select ref={selectRef}>
      <span slot="label">Choose an option</span>
      <custom-menu>
        {options.map(({ id, value, label }) => (
          <custom-menuoption key={id} value={value}>{label}</custom-menuoption>
        ))}
      </custom-menu>
    </custom-select>
  );
}

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