41 lines
1.2 KiB
Markdown
41 lines
1.2 KiB
Markdown
# Form
|
|
|
|
`lion-form` is a webcomponent that enhances the functionality of the native `form` component.
|
|
It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview--page).
|
|
|
|
> Note: Make sure to explicitly put `<form>` native element as a first child of `<lion-form>`, in order to function properly.
|
|
|
|
```js script
|
|
export default {
|
|
title: 'Forms/Form/Overview',
|
|
};
|
|
```
|
|
|
|
For a full demo of forms integrated with other lion field components, see [features overview](?path=/docs/forms-features-overview--main)
|
|
|
|
## Features
|
|
|
|
- Data synchronization with models
|
|
- Easy retrieval of form data based on field names
|
|
- Advanced validation possibilities
|
|
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
|
|
- Registration mechanism for [form controls](?path=/docs/forms-system-overview--page)
|
|
- Accessible out of the box
|
|
|
|
For more information about fields that are designed for lion-form, please read [forms](?path=/docs/forms-system-overview--page).
|
|
|
|
## How to use
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
npm i --save @lion/form
|
|
```
|
|
|
|
```js
|
|
import '@lion/form/lion-form.js';
|
|
```
|
|
|
|
## Example
|
|
|
|
See full [form example](?path=/docs/forms-features-overview--main)
|