39 lines
2.3 KiB
Markdown
39 lines
2.3 KiB
Markdown
[//]: # 'AUTO INSERT HEADER PREPUBLISH'
|
|
|
|
# Form System
|
|
|
|
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 | Description |
|
|
| ------------------------------------------------------------------- | ---------------------------------- |
|
|
| [checkbox](?path=/docs/forms-checkbox--default-story) | Checkbox form element |
|
|
| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | Group of checkboxes |
|
|
| [field](?path=/docs/forms-field--default-story) | Base class for all inputs |
|
|
| [fieldset](?path=/docs/forms-fieldset-overview--page) | Group for form inputs |
|
|
| [form](?path=/docs/forms-form-overview--page) | Wrapper for multiple form elements |
|
|
| [input](?path=/docs/forms-input--default-story) | Input element for strings |
|
|
| [input-amount](?path=/docs/forms-input-amount--default-story) | Input element for amounts |
|
|
| [input-date](?path=/docs/forms-input-date--default-story) | Input element for dates |
|
|
| [input-email](?path=/docs/forms-input-email--default-story) | Input element for e-mails |
|
|
| [input-iban](?path=/docs/forms-input-iban--default-story) | Input element for IBANs |
|
|
| [radio](?path=/docs/forms-radio--default-story) | Radio form element |
|
|
| [radio-group](?path=/docs/forms-radio-group--default-story) | Group of radios |
|
|
| [select](?path=/docs/forms-select--default-story) | Simple native dropdown element |
|
|
| [textarea](?path=/docs/forms-textarea--default-story) | Multiline text input |
|
|
| [validate](?path=/docs/forms-system-validate-system--default-story) | Validation for our form components |
|