Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Form: Overview

A web component that enhances the functionality of the native form component. It is designed to interact with (instances of) the form controls.

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
  • 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.

Installation

npm i --save @lion/ui
import '@lion/ui/define/lion-form.js';