Skip to main content



The ns-fieldset component is used to group related ns-inputters.

Use where you would normally use a vanilla html fieldset element. This element extends the layout for ns-form.

Best practises#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Add a legendGroup unrelated ns-inputters
Only use inside the ns-form componentNest ns-fieldsets unnecessarily, as this can lead to confusion

Considerations of best practises#

A legend is required to make the fieldset accessible

The first element inside the fieldset must be a legend element, which provides a label or description for the group


View example on Storybook

Component placement#

The ns-fieldset component can only be used in the ns-form component.


When adding radio buttons and checkboxes to ns-inputter inside an ns-fieldset, its heading size will match the size of all labels from other ns-inputter. This helps keep a logical visual hierarchy in a form.


legendtextAdd a legend to describe the contents of the fieldset


  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.

Related links#