# Radio `` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) that is rendered as a small circle, which is filled or highlighted when selected. Only one `` component in a given `` can be selected at the same time. ## Radio Use Cases The `` element is designed to be a single component for the use of creating an input `type="radio"` with an associated `` that meets all use case and accessibility standards. The following examples illustrate fully functional `` elements wrapped with the `` element. The `` element is REQUIRED in order to mantain the relationship between individual `` elements for functional radio button actions. **Note**: The `` element is only for to for use as a set of two or more `` elements within an `` element. ## Getting Started #### NPM Installation ```shell $ npm i @aurodesignsystem/auro-formkit ``` ### TypeScript Module Resolution When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`: ```json { "compilerOptions": { "moduleResolution": "bundler" } } ``` This configuration enables proper module resolution for the component's TypeScript files. ## Install from CDN In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported. ```html ``` ## Formkit Development ### Filtering Running the `dev` command will open a `localhost` development server for all components in the monorepo at once. To only develop a single component, use the `--filter` flag: ```shell npx turbo dev --filter=@aurodesignsystem/auro-input ``` ## 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. When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you. However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts. You can do this by importing only the component class and using the `register(name)` method with a unique name: ```js // 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.

Form label goes here

See code ```html Form label goes here

```