@lion/ui/docs/components/fieldset/overview.md

A package of extendable web components

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

# Fieldset: Overview

```js script
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.

```js preview-story
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](https://github.com/ing-bank/lion/blob/b7d7ffac177a6f66a52281c47d969558fa66edf8/docs/components/form/overview.md)
- [checkbox-group](https://github.com/ing-bank/lion/blob/b7d7ffac177a6f66a52281c47d969558fa66edf8/docs/components/checkbox-group/overview.md)
- [radio-group](https://github.com/ing-bank/lion/blob/b7d7ffac177a6f66a52281c47d969558fa66edf8/docs/components/radio-group/overview.md)

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](https://github.com/ing-bank/lion/blob/b7d7ffac177a6f66a52281c47d969558fa66edf8/docs/fundamentals/systems/form/interaction-states.md)
- Can have [validate](https://github.com/ing-bank/lion/blob/b7d7ffac177a6f66a52281c47d969558fa66edf8/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
- Can disable input fields on fieldset level
- Accessible out of the box

## Installation

```bash
npm i --save @lion/ui
```

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