# Fieldset

The Fieldset component allows developers to put related form inputs into a group.

## When to use this component

Use a fieldset to group multiple form inputs. For example, a set of radio inputs.

## When not to use this component

Do not use fieldsets:

- outside of forms
- for a single input

Do not nest one fieldset inside another. This makes it difficult for assistive technology users to know which one they are in.

## How it works

### Installation 

To install the components, [go to the get started guide for developers](https://github.com/springernature/elements). 

To use the Fieldset component, enter the following command in your Terminal: 

```bash 
npm install @springernature/elements 
``` 

### Styles 

First, import the styles of the Form component: 

```scss 
@import '../path/to/@springernature/elements/components/eds-c-form'; 
``` 

Then, import the styles of the Fieldset component into your `scss` file: 

```scss 
@import '../path/to/@springernature/elements/components/eds-c-fieldset'; 
```

## Configuration

For more detailed information on how to use the properties correctly, [go to the schema file](https://github.com/springernature/elements/blob/main/components/eds-c-fieldset/data/eds-c-fieldset.schema.json).

### Properties

#### legend

Within the fieldset, use a `legend` element to provide a label for the group. 

#### aria-invalid="true"

You must use `aria-invalid="true"` on the fieldset. Do not use it on the input inside the fieldset. 

### Error summary

When there are errors on the inputs within the fieldset, the error summary must link to the first input in the group.

Use the `id` attribute of the first input for the `href` attribute of the link.

Show an error when the user has not:

- selected any inputs on a required field
- answered a question conditionally revealed by the inputs
