ayo/lion

History

Joren Broekema c984a66d4b fix(fieldset): manage when to show error messages Co-authored-by: Thomas Allmer <thomas.allmer@ing.com>		2019-10-31 18:31:53 +01:00
..
src	fix(fieldset): manage when to show error messages	2019-10-31 18:31:53 +01:00
stories	fix(fieldset): manage when to show error messages	2019-10-31 18:31:53 +01:00
test	fix(fieldset): manage when to show error messages	2019-10-31 18:31:53 +01:00
CHANGELOG.md	chore: release new versions	2019-10-25 13:36:39 +00:00
index.js	feat: release inital public lion version	2019-04-26 10:37:57 +02:00
lion-fieldset.js	feat: release inital public lion version	2019-04-26 10:37:57 +02:00
package.json	chore: release new versions	2019-10-25 13:36:39 +00:00
README.md	chore: fix style of markdown files	2019-07-24 15:20:19 +02:00

README.md

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" .errorValidations="${[['required]]}">
    <lion-input name="firstName" label="First name"></lion-input>
    <lion-input name="lastName" label="Last name"></lion-input>
  </lion-fieldset>
</lion-fieldset>