# 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)