ns-fieldset

Introduction#

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 legend	Group unrelated ns-inputters
Only use inside the ns-form component	Nest `ns-fieldset`s unnecessarily, as this can lead to confusion

Considerations of best practises#

A legend is required to make the fieldset accessible

https://www.w3.org/WAI/WCAG21/Techniques/html/H71

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

Usage#

View example on Storybook

Component placement#

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

Specification#

Attribute	Type	Default	Options	Description
`legend`	`text`			Add a legend to describe the contents of the fieldset

Slots	Type
Anonymous	ns-inputters

Design Tokens

You can change the branded look and feel of the ns-fieldset by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "gutter": {
    "squash-court": "1.5rem",
    "basketball-court": "1.75rem",
    "hockey-pitch": "2rem"
  },
  "legend": {
    "typography": "heading-4"
  }
}

Feedback#

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.

💩 🎉 🦄 You can also contact the team on Slack on the #product-nucleus channel!