ayo/lion

Thomas Allmer 396deb2e3b feat: finalize validation and adopt it everywhere

Co-authored-by: Alex Ghiu <alex.ghiu@ing.com>
Co-authored-by: Gerjan van Geest <Gerjan.van.Geest@ing.com>
Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com>
Co-authored-by: Joren Broekema <joren.broekema@ing.com>
Co-authored-by: Erik Kroes <erik.kroes@ing.com>

2019-11-18 15:30:08 +01:00

1.1 KiB

Raw Blame History

Fieldset

lion-fieldset groups multiple input fields or other fieldsets together.

Two specific types of fieldsets:

Features

easy retrieval of form data based on field names
advanced user interaction scenarios via interaction states
can have validate on fieldset level and shows the validation feedback below the fieldset
can disable input fields on fieldset level
accessible out of the box

How to use

Installation

npm i --save @lion/fieldset

import '@lion/fieldset/lion-fieldset.js';
import '@lion/input/lion-input.js';

Example

<lion-fieldset name="personalia" label="personalia">
  <lion-input name="title" label="Title"></lion-input>
  <lion-fieldset name="fullName" label="Full name" .validations="${[new Required()]}">
    <lion-input name="firstName" label="First name"></lion-input>
    <lion-input name="lastName" label="Last name"></lion-input>
  </lion-fieldset>
</lion-fieldset>