lion/docs/components/fieldset/overview.md

parts	title	eleventyNavigation
Fieldset Overview	Fieldset: Overview	key order parent title Fieldset: Overview 10 Fieldset Overview

Fieldset: Overview

import { html } from '@mdjs/mdjs-preview';

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

A web component that can be used to group multiple input fields or other fieldsets together.

export const main = () => html`
  <lion-fieldset name="nameGroup" label="Name">
    <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
    <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
  </lion-fieldset>
`;

We have three specific fieldset implementations:

• form
• checkbox-group
• radio-group

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".

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

Installation

npm i --save @lion/ui

import { LionFieldset } from '@lion/ui/fieldset.js';
// or
import '@lion/ui/define/lion-fieldset.js';