ayo/lion

Thomas Allmer ec8da8f12c feat: release inital public lion version

Co-authored-by: Mikhail Bashkirov <mikhail.bashkirov@ing.com>
Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>
Co-authored-by: Joren Broekema <joren.broekema@ing.com>
Co-authored-by: Gerjan van Geest <gerjan.van.geest@ing.com>
Co-authored-by: Erik Kroes <erik.kroes@ing.com>
Co-authored-by: Lars den Bakker <lars.den.bakker@ing.com>

2019-04-26 10:37:57 +02:00

1.3 KiB

Raw Blame History

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.

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

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" .modelValue=${model.firstName}></lion-input>
    <lion-input label="Last Name" name="lastName" .modelValue=${model.lastName}></lion-input>
  </lion-fieldset>
  <lion-textarea label="Description" name="description" .modelValue=${model.description}></lion-textarea>
</form></lion-form>

Note that the example above is rendered using lit-html

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

1.3 KiB Raw Blame History