ayo/lion

History

Thomas Allmer 9f5ec325fe chore: update @open-wc/testing		2019-09-25 10:51:09 +02:00
..
src	fix(fieldset): reset / inital modelValue always accurate	2019-08-14 16:21:08 +02:00
stories	chore(fieldset): replaced CssClassMixin by DisabledMixin	2019-08-13 17:28:22 +02:00
test	chore: update linting	2019-08-21 11:30:51 +02:00
CHANGELOG.md	chore: release new versions	2019-09-20 08:23:45 +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: update @open-wc/testing	2019-09-25 10:51:09 +02: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>