Setup

Recommended Installation and Implementation

Install

$ npm i @aurodesignsystem/auro-formkit

Implementation

Custom Component Registration for Version Management There are two key parts to every Auro component: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML. You can do this by importing only the component class and using the `register(name)` method with a unique name:

// Import the class only
import { AuroRadio, AuroRadioGroup } from '@aurodesignsystem/auro-formkit/auro-radio/class';

// Register with a custom name if desired
AuroRadio.register('custom-radio');
AuroRadioGroup.register('custom-radio-group');

This will create a new custom element `` and `` that behaves exactly like `` and ``, allowing both to coexist on the same page without interfering with each other.

<custom-radio-group>
  <span slot="legend">Form label goes here</span>
  <custom-radio id="customRadio1" label="Yes" name="radioDemo" value="yes"></custom-radio>
  <custom-radio id="customRadio2" label="No" name="radioDemo" value="no"></custom-radio>
  <custom-radio id="customRadio3" label="Maybe" name="radioDemo" value="maybe"></custom-radio>
</custom-radio-group>

Auto Installation and Implementation

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.

Install

$ npm i @aurodesignsystem/auro-formkit

Implementation

Import the component and its dependencies, then register the custom elements:

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

Then use the elements in your HTML:

<auro-radio-group>
  <span slot="legend">Form label goes here</span>
  <auro-radio id="radio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
  <auro-radio id="radio2" label="No" name="radioDemo" value="no"></auro-radio>
  <auro-radio id="radio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
</auro-radio-group>

CDN Installation

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.

The radio components can be loaded via CDN without a build step:

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

Then use the elements in your HTML:

<auro-radio-group>
  <span slot="legend">Form label goes here</span>
  <auro-radio id="radio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
  <auro-radio id="radio2" label="No" name="radioDemo" value="no"></auro-radio>
  <auro-radio id="radio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
</auro-radio-group>

Frameworks

React

React 19 includes native support for custom elements, so <auro-radio> works directly in JSX without any wrapper library. Import the Component Import and register the components at the top level of your application (e.g. in your root `main.tsx` or `App.tsx`):

import { AuroRadio, AuroRadioGroup } from '@aurodesignsystem/auro-formkit/auro-radio/class';

AuroRadio.register('[custom]-radio');
AuroRadioGroup.register('[custom]-radio-group');

TypeScript Declarations The component ships with TypeScript type definitions for the `AuroRadio` class. However, React's JSX does not automatically map custom element tag names to their types. To get type checking for `` in JSX, add the following declaration to a `.d.ts` file in your project:

import type { AuroRadio, AuroRadioGroup } from '@aurodesignsystem/auro-formkit/auro-radio/class';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      '[custom]-radio': React.HTMLAttributes<AuroRadio> & Partial<AuroRadio>;
      '[custom]-radio-group': React.HTMLAttributes<AuroRadioGroup> & Partial<AuroRadioGroup>;
    }
  }
}

Event Handling Auro components emit native `CustomEvent`s. Use a `ref` to attach event listeners in a `useEffect`:

import { useRef, useEffect } from 'react';

function MyRadioGroup() {
  const groupRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const el = groupRef.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-radio-group ref={groupRef}>
      <span slot="legend">Choose an option</span>
      <custom-radio value="yes" name="example" label="Yes"></custom-radio>
      <custom-radio value="no" name="example" label="No"></custom-radio>
    </custom-radio-group>
  );
}

Module Resolution Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:

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

Svelte

Svelte has native support for custom elements, so <auro-radio> works directly in Svelte templates without any wrapper or configuration. Import the Component Import and register the components in the `