ayo/lion

History

CircleCI e3389ad233 chore: release new versions - @lion/button@0.4.3 - @lion/calendar@0.5.4 - @lion/checkbox-group@0.4.1 - @lion/fieldset@0.5.4 - @lion/form-system@0.2.11 - @lion/form@0.3.11 - @lion/input-datepicker@0.6.4 - @lion/popup@0.4.6 - @lion/radio-group@0.4.1 - @lion/select-rich@0.8.3 - @lion/switch@0.3.13		2019-12-11 15:20:34 +00:00
..
src	fix(fieldset): wait for registration before setting values	2019-11-27 16:58:59 +01:00
stories	feat: finalize validation and adopt it everywhere	2019-11-18 15:30:08 +01:00
test	Merge pull request #406 from ing-bank/fix/set-initial-fieldset-value	2019-12-11 16:17:39 +01:00
CHANGELOG.md	chore: release new versions	2019-12-11 15:20:34 +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-12-11 15:20:34 +00:00
README.md	feat: finalize validation and adopt it everywhere	2019-11-18 15:30:08 +01: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" .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>