41 lines
5.2 KiB
Markdown
41 lines
5.2 KiB
Markdown
[//]: # '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) | [](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes |
|
|
| [form-core](?path=/docs/forms-system-overview--page) | [](https://www.npmjs.com/package/@lion/form-core) | Core functionality for all controls |
|
|
| [form-integrations](?path=/docs/forms-features-overview--main) | [](https://www.npmjs.com/package/@lion/form-integrations) | Shows form elements in an integrated way |
|
|
| [fieldset](?path=/docs/forms-fieldset-overview--main) | [](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs |
|
|
| [form](?path=/docs/forms-form-overview--main) | [](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements |
|
|
| [input](?path=/docs/forms-input--main) | [](https://www.npmjs.com/package/@lion/input) | Input element for strings |
|
|
| [input-amount](?path=/docs/forms-input-amount--main) | [](https://www.npmjs.com/package/@lion/input-amount) | Input element for amounts |
|
|
| [input-date](?path=/docs/forms-input-date--main) | [](https://www.npmjs.com/package/@lion/input-date) | Input element for dates |
|
|
| [input-datepicker](?path=/docs/forms-input-datepicker--main) | [](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker |
|
|
| [input-email](?path=/docs/forms-input-email--main) | [](https://www.npmjs.com/package/@lion/input-email) | Input element for e-mails |
|
|
| [input-iban](?path=/docs/forms-input-iban--main) | [](https://www.npmjs.com/package/@lion/input-iban) | Input element for IBANs |
|
|
| [input-range](?path=/docs/forms-input-range--main) | [](https://www.npmjs.com/package/@lion/input-range) | Input element for a range of values |
|
|
| [input-stepper](?path=/docs/forms-input-stepper--main) | [](https://www.npmjs.com/package/@lion/input-stepper) | Input stepper element for the predefined range |
|
|
| [radio-group](?path=/docs/forms-radio-group--main) | [](https://www.npmjs.com/package/@lion/radio-group) | Group of radios |
|
|
| [select](?path=/docs/forms-select--main) | [](https://www.npmjs.com/package/@lion/select) | Simple native dropdown element |
|
|
| [select-rich](?path=/docs/forms-select-rich--main) | [](https://www.npmjs.com/package/@lion/select-rich) | 'rich' version of the native dropdown element |
|
|
| [textarea](?path=/docs/forms-textarea--main) | [](https://www.npmjs.com/package/@lion/textarea) | Multiline text input |
|