94b87c80f5
- @lion/ajax@0.4.0 - babel-plugin-extend-docs@0.2.0 - @lion/button@0.7.0 - @lion/calendar@0.9.0 - @lion/checkbox-group@0.10.0 - @lion/dialog@0.7.0 - @lion/fieldset@0.13.0 - @lion/form-core@0.1.0 - @lion/form-integrations@0.1.0 - @lion/form@0.6.0 - @lion/icon@0.6.0 - @lion/input-amount@0.7.0 - @lion/input-date@0.7.0 - @lion/input-datepicker@0.14.0 - @lion/input-email@0.8.0 - @lion/input-iban@0.9.0 - @lion/input-range@0.4.0 - @lion/input@0.7.0 - @lion/localize@0.11.0 - @lion/overlays@0.16.0 - @lion/radio-group@0.10.0 - @lion/select-rich@0.18.0 - @lion/select@0.7.0 - @lion/steps@0.5.0 - @lion/switch@0.10.0 - @lion/tabs@0.4.0 - @lion/textarea@0.7.0 - @lion/tooltip@0.11.0 - @lion/validate-messages@0.1.0 |
||
|---|---|---|
| .. | ||
| docs/helpers | ||
| src | ||
| test | ||
| CHANGELOG.md | ||
| index.js | ||
| lion-fieldset.js | ||
| package.json | ||
| README.md | ||
Fieldset
lion-fieldset groups multiple input fields or other fieldsets together.
import { html } from 'lit-html';
import '@lion/input/lion-input.js';
import { localize } from '@lion/localize';
import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
import { MinLength, Validator, Required } from '@lion/form-core';
import './lion-fieldset.js';
import './docs/helpers/demo-fieldset-child.js';
export default {
title: 'Forms/Fieldset/Overview',
};
We have three specific fieldset implementations:
export const main = () => html`
<lion-fieldset name="nameGroup" label="Name">
<lion-input name="FirstName" label="First Name"></lion-input>
<lion-input name="LastName" label="Last Name"></lion-input>
</lion-fieldset>
`;
A native fieldset element should always have a legend-element for a11y purposes.
However, our fieldset element is not native and should not have a legend-element.
Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using slot="label".
Live Demo/Documentation
See our storybook for a live demo and documentation
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 { LionFieldset } from '@lion/fieldset';
// or
import '@lion/fieldset/lion-fieldset.js';
Example
<lion-fieldset name="personalia" label="personalia">
<lion-input name="title" label="Title"></lion-input>
</lion-fieldset>
For more examples please look at Fieldset Examples.