Fieldset
Fieldset groups multiple related form input fields together by giving them a common legend heading.
Usage
Example
Principles
- The Fieldset component should only contain form elements such as input fields and form controls. See HDS Form pattern documentation for more information about available form elements.
- It is recommended that Fieldsets always contain at least two (2) form elements.
- As a rule of thumb, if a group of form elements require a heading, the usage of a Fieldset is recommended.
- For example, multiple input fields related to inputting user's address can be grouped together with a Fieldset with a heading "Address".
- A heading must be given to the Fieldset. The heading should be clear and describe the input group.
- A good heading describes why the form element inside the Fieldset are grouped together. For example, a heading "Guardian information" tells the user that the following elements are meant to input personal information related to the child's guardian.
- HDS Fieldset does not style the content in any way. Depending on the layout of the service, you may have to add space between the inputs to distinguish them from each other.
- Avoid using Fieldsets if the form elements are only loosely related. Use a standard heading element instead.
- For grouping checkboxes or radio buttons, use HDS Selection group component instead.
Variations
Default
The default HDS Fieldset is a visually light since it omits the borders that are present in the default HTML fieldset. It is well suited for forms with a relatively low amount of fields where input groups are easily perceivable even without Fieldset borders.
With border
This Fieldset variant includes visual borders that are often present in the default HTML fieldsets. The borders help to distinguish groups from each other and they are useful when the form contains a large amount of form elements.
Border variant is also useful when the form contains multiple form elements with a same label. For example, when the same contact information is asked for multiple different people in the same form.
With tooltip
A Fieldset can be provided with additional tooltip. Tooltip information should be considered as extra information, for example, why this information is gathered or how is it used. You can find more information about Tooltips how they are used from the Tooltip documentation page.