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

<custom-combobox>
  <span slot="bib.fullscreen.headline">Bib Header</span>
  <span slot="label">Name</span>
  <auro-menu>
    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
    <auro-menuoption static nomatch>No matching option</auro-menuoption>
  </auro-menu>
</custom-combobox>

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

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

<auro-combobox>
  <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-menuoption static nomatch>No matching option</auro-menuoption>
  </auro-menu>
</auro-combobox>

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

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

<auro-combobox>
  <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-menuoption static nomatch>No matching option</auro-menuoption>
  </auro-menu>
</auro-combobox>

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

import type { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class';
import type { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-menu/auro-menu/class';
​
declare global {
  namespace JSX {
    interface IntrinsicElements {
      '[custom]-combobox': React.HTMLAttributes<AuroCombobox> & Partial<AuroCombobox>;
      '[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: 'SEA', label: 'Seattle-Tacoma International' },
  { id: 'opt-2', value: 'LAX', label: 'Los Angeles International' },
  { id: 'opt-3', value: 'JFK', label: 'John F. Kennedy International' },
  { id: 'opt-4', value: 'ORD', label: "O'Hare International" },
];
​
function MyCombobox() {
  const comboboxRef = useRef<HTMLElement>(null);
​
  useEffect(() => {
    const el = comboboxRef.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-combobox ref={comboboxRef}>
      <span slot="label">Search airports</span>
      <custom-menu>
        {options.map(({ id, value, label }) => (
          <custom-menuoption key={id} value={value}>{label}</custom-menuoption>
        ))}
        <custom-menuoption static nomatch>No matching airport</custom-menuoption>
      </custom-menu>
    </custom-combobox>
  );
}

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