Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetPrinciplesAccessibilityUsage & variantsDemos & APIFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Fieldset

DraftAccessible

Fieldset groups multiple related form input fields together by giving them a common legend heading.

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

Accessibility

  • Note that the heading is programmatically attached to each form element it contains. When assistive technologies focus a form element inside a Fieldset, they will announce the Fieldset heading in addition to the focused element information.
  • Fieldset heading does not replace form element labels. Each form element still must have their own label. For more information, refer to WCAG 3.3.2 Labels and Instructions guideline.

Usage & variants

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.

Child information
Guardian information

Core code example:

<fieldset class="hds-fieldset" style="max-width: 400px">
<legend class="hds-fieldset-legend">Child information</legend>
<div class="hds-text-input">
First name *
<div class="hds-text-input__input-wrapper">
<input id="first-name" name="first-name" class="hds-text-input__input" type="text" />
</div>
</div>
<div class="hds-text-input" style="margin-top: 12px">
Last name *
<div class="hds-text-input__input-wrapper">
<input id="last-name" name="last-name" class="hds-text-input__input" type="text" />
</div>
</div>
<div class="hds-text-input" style="margin-top: 12px">
Social security number *
<div class="hds-text-input__input-wrapper">
<input id="social-security-number" name="social-security-number" class="hds-text-input__input" type="text" />
</div>
</div>
</fieldset>
<fieldset class="hds-fieldset" style="max-width: 400px">
<legend class="hds-fieldset-legend">Guardian information</legend>
<div class="hds-text-input">
First name *
<div class="hds-text-input__input-wrapper">
<input id="first-name" name="first-name" class="hds-text-input__input" type="text" />
</div>
</div>
<div class="hds-text-input" style="margin-top: 12px">
Last name *
<div class="hds-text-input__input-wrapper">
<input id="last-name" name="last-name" class="hds-text-input__input" type="text" />
</div>
</div>
<div class="hds-text-input" style="margin-top: 12px">
Social security number *
<div class="hds-text-input__input-wrapper">
<input id="social-security-number" name="social-security-number" class="hds-text-input__input" type="text" />
</div>
</div>
</fieldset>

React code example:

<Fieldset heading="Child information" style={{ maxWidth: '400px' }}>
<TextInput id="first-name" name="first-name" label="First name" />
<TextInput id="last-name" name="last-name" label="Last name" style={{ marginTop: '12px' }} />
<TextInput
id="social-security-number"
name="social-security-number"
label="Social security number"
placeholder="Eg. 111299-1234"
style={{ marginTop: '12px' }}
/>
</Fieldset>
<Fieldset heading="Guardian information" style={{ maxWidth: '400px'}}>
<TextInput id="first-name" name="first-name" label="First name" />
<TextInput id="last-name" name="last-name" label="Last name" style={{ marginTop: '12px' }} />
<TextInput
id="social-security-number"
name="social-security-number"
label="Social security number"
placeholder="Eg. 111299-1234"
style={{ marginTop: '12px' }}
/>
</Fieldset>

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.

Applicant information
Guardian information

Core code example:

<fieldset class="hds-fieldset hds-fieldset--border" style="max-width: 400px">
<legend class="hds-fieldset-legend">Child information</legend>
<div class="hds-text-input">
First name *
<div class="hds-text-input__input-wrapper">
<input id="first-name" name="first-name" class="hds-text-input__input" type="text" />
</div>
</div>
<div class="hds-text-input" style="margin-top: 12px">
Last name *
<div class="hds-text-input__input-wrapper">
<input id="last-name" name="last-name" class="hds-text-input__input" type="text" />
</div>
</div>
<div class="hds-text-input" style="margin-top: 12px">
Social security number *
<div class="hds-text-input__input-wrapper">
<input id="social-security-number" name="social-security-number" class="hds-text-input__input" type="text" />
</div>
</div>
</fieldset>
<fieldset class="hds-fieldset hds-fieldset--border" style="max-width: 400px">
<legend class="hds-fieldset-legend">Guardian information</legend>
<div class="hds-text-input">
First name *
<div class="hds-text-input__input-wrapper">
<input id="first-name" name="first-name" class="hds-text-input__input" type="text" />
</div>
</div>
<div class="hds-text-input" style="margin-top: 12px">
Last name *
<div class="hds-text-input__input-wrapper">
<input id="last-name" name="last-name" class="hds-text-input__input" type="text" />
</div>
</div>
<div class="hds-text-input" style="margin-top: 12px">
Social security number *
<div class="hds-text-input__input-wrapper">
<input id="social-security-number" name="social-security-number" class="hds-text-input__input" type="text" />
</div>
</div>
</fieldset>

React code example:

<Fieldset heading="Applicant information" border style={{ maxWidth: '400px' }}>
<TextInput id="first-name" name="first-name" label="First name" />
<TextInput id="last-name" name="last-name" label="Last name" style={{ marginTop: '12px' }} />
<TextInput
id="social-security-number"
name="social-security-number"
label="Social security number"
placeholder="Eg. 111299-1234"
style={{ marginTop: '12px' }}
/>
</Fieldset>
<Fieldset heading="Guardian information" border style={{ maxWidth: '400px'}}>
<TextInput id="first-name" name="first-name" label="First name" />
<TextInput id="last-name" name="last-name" label="Last name" style={{ marginTop: '12px' }} />
<TextInput
id="social-security-number"
name="social-security-number"
label="Social security number"
placeholder="Eg. 111299-1234"
style={{ marginTop: '12px' }}
/>
</Fieldset>

Demos & API

Core

Fieldset in hds-core

React

Fieldset in hds-react

Fieldset API