lion/packages/form/README.md

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.

import { html } from 'lit-html';
import '@lion/input/lion-input.js';
import './lion-form.js';

export default {
  title: 'Forms/Form/Overview',
};

export const main = () => html`
  <lion-form id="form">
    <form>
      <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
      <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
    </form>
  </lion-form>
`;

Live Demo/Documentation

See our storybook for a live demo and documentation

Features

• Data synchronization with models
• Easy retrieval of form data based on field names
• Advanced validation possibilities
• Advanced user interaction scenarios via interaction states
• Registration mechanism for form controls
• Accessible out of the box

For more information about fields that are designed for lion-form, please read Forms.

How to use

Installation

npm i --save @lion/form

import '@lion/form/lion-form.js';

Example

<lion-form>
  <form>
    <lion-fieldset name="fullName">
      <lion-input label="First Name" name="firstName"></lion-input>
    </lion-fieldset>
  </form>
</lion-form>

For more examples please look at Form Examples.