Package Exports

@lion/form
@lion/form/lion-form
@lion/form/lion-form.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lion/form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>
`;

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>