Form Fieldset

Fieldsets group together fields within a form.

It's a semantic group, not necessarily a visual one. This component however provides a legend prop to help visually segment fieldsets.

Zoning

Style

Group logical blocks into a fieldset.

If the fields are even more closely related, display them on the same line using Row.

States

Error

A fieldset usually does not carry error state. Its individual fields do.

In case of more than one error or a horizontal fieldset, display the errors under each affected field.

Content

Legend

Provide a legend to the fieldset to help contextualize its contents.

Inline message

Field validation may sometime be more complex than on a single field.

If the broken validation rule benefits from a single point of explanation, use an InlineMessage within the affected Fieldset instead.

This is the only exception to the rule. Errors must otherwise be displayed under each field.

Interactions

Conditional fieldsets

A conditional fieldset appears only when previous conditions are met.

The trigger can be any "on / off" interactions available in a form:

• A checkbox has been activated
• A radio button has been selected
• A switch has been toggled
• A select field has been set to a specific value
• A button has been pressed

Use sparingly as it makes a form harder to predict and understand at a glance.

Usage

N/A

Accessibility

N/A