@lion/ui/docs/components/form/overview.md

A package of extendable web components

---
parts:
  - Form
  - Overview
title: 'Form: Overview'
eleventyNavigation:
  key: 'Form: Overview'
  order: 10
  parent: Form
  title: Overview
---

# Form: Overview

```js script
import { html } from '@mdjs/mdjs-preview';

import '@lion/ui/define/lion-input.js';
import '@lion/ui/define/lion-form.js';
```

A web component that enhances the functionality of the native `form` component.
It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/overview.md).

```js preview-story
export const main = () => {
  const submitHandler = ev => {
    const formData = ev.target.serializedValue;
    console.log('formData', formData);
    fetch('/api/foo/', {
      method: 'POST',
      body: JSON.stringify(formData),
    });
  };
  return html`
    <lion-form @submit="${submitHandler}">
      <form @submit="${ev => ev.preventDefault()}">
        <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
        <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
        <button>Submit</button>
      </form>
    </lion-form>
  `;
};
```

## Features

- Data synchronization with models
- Easy retrieval of form data based on field names
- Advanced validation possibilities
- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/interaction-states.md)
- Registration mechanism for form controls
- Accessible out of the box

For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/overview.md).

## Installation

```bash
npm i --save @lion/ui
```

```js
import '@lion/ui/define/lion-form.js';
```