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.
To use the Fieldset component, enter the following command in your Terminal:
npm install @springernature/elements Styles
First, import the styles of the Form component:
@import '../path/to/@springernature/elements/components/eds-c-form'; Then, import the styles of the Fieldset component into your scss file:
@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.
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
Help improve this page
If you’ve got a question, idea or suggestion about how to improve this component or guidance,
post in the #ask-elements Slack channel.