# Counter
The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the `auro-counter-group` to facilitate a collection of counters to add passenger types to a flight.
## Counter Use Cases
The `auro-counter` element should be used in situations where users may:
* Need to input a numeric value within a defined range
* Need a user-friendly interface for quantity selection
## 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 { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';
// Register with a custom name if desired
AuroCounter.register('custom-counter');
AuroCounterGroup.register('custom-counter-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.
Passengers
Passengers
Adults
18 years or older
Children
2-17 years
See code
```html
Passengers
Passengers
Adults
18 years or older
Children
2-17 years
```html
Form label goes here
Custom checkbox option
Custom checkbox option
Custom checkbox option
Custom checkbox option
```