<!--
The README.md file is a compiled document. No edits should be made directly to this file.

README.md is created by running `npm run build:docs:kit`.

This file is generated based on the template at
`./docs/templates/kitReadmeTemplate.md`
and compiled to `./README.md` each time the docs are compiled.

The following sections are editable by making changes to the following files:

| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
|------------------------|---------------------------------------------------|-------------------------------------|
| Description            | Description of the kit                            | `./docs/partials/description.md`    |
| Use Cases              | Examples for when to use this kit                 | `./docs/partials/useCases.md`       |
| Install                | Installation instructions                         | `./docs/partials/kitInstall.md`     |
| Getting Started        | Getting started links for each component          | `./docs/partials/gettingStarted.md` |
-->

# Formkit

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
<!-- The below content is automatically added from ./docs/partials/description.md -->

## Description

`auro-formkit` is a collection of web components that can be used to build forms.

It is a monorepo that contains the following components:

- `auro-checkbox`
    - `auro-checkbox-group`
- `auro-combobox`
- `auro-counter`
    - `auro-counter-group`
- `auro-datepicker`
- `auro-dropdown`
- `auro-form`
- `auro-input`
- `auro-menu`
    - `auro-menu-option`
- `auro-radio`
    - `auro-radio-group`
- `auro-select`
<!-- AURO-GENERATED-CONTENT:END -->

## Use Cases

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
<!-- The below content is automatically added from ./docs/partials/useCases.md -->

### 1. User Accounts
- Sign up and login forms  
- Email and password validation  

### 2. Checkout & Payments
- Collect shipping and billing info  
- Use autofill and validation to reduce errors  

### 3. Booking & Scheduling
- Select dates and times  
- Prevent invalid selections (like past dates)  

### 4. Search & Filters
- Search inputs with suggestions  
- Filters like price ranges or categories  

### 5. File Uploads
- Upload images, documents, or media  
- Restrict file types and allow multiple files  

### 6. Feedback & Surveys
- Collect ratings, choices, and comments  
- Require answers where needed  

### 7. Calculators & Dynamic Forms
- Show real-time results (e.g., pricing, totals)  

### 8. Multi-Step Forms
- Break long forms into smaller steps  

### 9. Mobile-Friendly Input
- Use input types that trigger the right keyboard  

### 10. Accessible Forms
- Proper labels and grouped inputs  
- Built-in error handling  

### 11. Built-in Validation
- Use HTML5 rules instead of custom JavaScript
<!-- AURO-GENERATED-CONTENT:END -->

## Getting Started

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/kitInstall.md) -->
<!-- The below content is automatically added from ./docs/partials/kitInstall.md -->
[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-formkit/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-formkit/actions/workflows/testPublish.yml)
[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-formkit?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-formkit)
[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-formkit?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)

#### NPM Installation

```shell
$ npm i @aurodesignsystem/auro-formkit
```
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/gettingStarted.md) -->
<!-- The below content is automatically added from ./docs/partials/gettingStarted.md -->

### Getting Started

Each component contains its own Getting Started documentation.

<ul>
  <li><a href="https://auro.alaskaair.com/components/auro/checkbox/getting-started">checkbox</a></li>
  <li><a href="https://auro.alaskaair.com/components/auro/combobox/getting-started">combobox</a></li>
  <li><a href="https://auro.alaskaair.com/components/auro/counter/getting-started">counter</a></li>
  <li><a href="https://auro.alaskaair.com/components/auro/datepicker/getting-started">datepicker</a></li>
  <li><a href="https://auro.alaskaair.com/components/auro/dropdown/getting-started">dropdown</a></li>
  <li><a href="https://auro.alaskaair.com/components/auro/form/getting-started">form</a></li>
  <li><a href="https://auro.alaskaair.com/components/auro/input/getting-started">input</a></li>
  <li><a href="https://auro.alaskaair.com/components/auro/menu/getting-started">menu</a></li>
  <li><a href="https://auro.alaskaair.com/components/auro/radio/getting-started">radio</a></li>
  <li><a href="https://auro.alaskaair.com/components/auro/select/getting-started">select</a></li>
</ul>
<!-- AURO-GENERATED-CONTENT:END -->
