[//]: # 'AUTO INSERT HEADER PREPUBLISH'

# Form Integratioms

The Form System allows you to create complex forms with various validations in an easy way.

```js script
export default {
  title: 'Forms/Intro',
};
```

## Features

- Built in [validate](?path=/docs/forms-validation-overview--page) for error/warning/info/success
- Formatting of values
- Accessible

For a more in depth description look into the [Form System Overview](?path=/docs/forms-system-overview--page).

## Packages

| Package                                                        | Version                                                                                                                                 | Description                                    |
| -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| [checkbox-group](?path=/docs/forms-checkbox-group--main)       | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group)          | Group of checkboxes                            |
| [form-core](?path=/docs/forms-system-overview--page)           | [![form-core](https://img.shields.io/npm/v/@lion/form-core.svg)](https://www.npmjs.com/package/@lion/form-core)                         | Core functionality for all controls            |
| [form-integrations](?path=/docs/forms-features-overview--main) | [![form-integrations](https://img.shields.io/npm/v/@lion/form-integrations.svg)](https://www.npmjs.com/package/@lion/form-integrations) | Shows form elements in an integrated way       |
| [fieldset](?path=/docs/forms-fieldset-overview--main)          | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset)                            | Group for form inputs                          |
| [form](?path=/docs/forms-form-overview--main)                  | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form)                                        | Wrapper for multiple form elements             |
| [input](?path=/docs/forms-input--main)                         | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input)                                     | Input element for strings                      |
| [input-amount](?path=/docs/forms-input-amount--main)           | [![input-amount](https://img.shields.io/npm/v/@lion/input-amount.svg)](https://www.npmjs.com/package/@lion/input-amount)                | Input element for amounts                      |
| [input-date](?path=/docs/forms-input-date--main)               | [![input-date](https://img.shields.io/npm/v/@lion/input-date.svg)](https://www.npmjs.com/package/@lion/input-date)                      | Input element for dates                        |
| [input-datepicker](?path=/docs/forms-input-datepicker--main)   | [![input-datepicker](https://img.shields.io/npm/v/@lion/input-datepicker.svg)](https://www.npmjs.com/package/@lion/input-datepicker)    | Input element for dates with a datepicker      |
| [input-email](?path=/docs/forms-input-email--main)             | [![input-email](https://img.shields.io/npm/v/@lion/input-email.svg)](https://www.npmjs.com/package/@lion/input-email)                   | Input element for e-mails                      |
| [input-iban](?path=/docs/forms-input-iban--main)               | [![input-iban](https://img.shields.io/npm/v/@lion/input-iban.svg)](https://www.npmjs.com/package/@lion/input-iban)                      | Input element for IBANs                        |
| [input-range](?path=/docs/forms-input-range--main)             | [![input-range](https://img.shields.io/npm/v/@lion/input-range.svg)](https://www.npmjs.com/package/@lion/input-range)                   | Input element for a range of values            |
| [input-stepper](?path=/docs/forms-input-stepper--main)         | [![input-stepper](https://img.shields.io/npm/v/@lion/input-stepper.svg)](https://www.npmjs.com/package/@lion/input-stepper)             | Input stepper element for the predefined range |
| [radio-group](?path=/docs/forms-radio-group--main)             | [![radio-group](https://img.shields.io/npm/v/@lion/radio-group.svg)](https://www.npmjs.com/package/@lion/radio-group)                   | Group of radios                                |
| [select](?path=/docs/forms-select--main)                       | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select)                                  | Simple native dropdown element                 |
| [select-rich](?path=/docs/forms-select-rich--main)             | [![select-rich](https://img.shields.io/npm/v/@lion/select-rich.svg)](https://www.npmjs.com/package/@lion/select-rich)                   | 'rich' version of the native dropdown element  |
| [textarea](?path=/docs/forms-textarea--main)                   | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea)                            | Multiline text input                           |