ns-fieldset

Molecule | Form component.

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-fieldsets 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

To see examples visit Storybook

<ns-form>
<ns-fieldset legend="legend text">
<ns-inputter>
...
</ns-inputter>
<ns-inputter>
...
</ns-inputter>
</ns-fieldset>
</ns-form>

Component relationship

Relationship

Does it live in a panel?

❌ No

Does it live inside other components?

✅ Yes - ns-form

What layout classes can be used?

❌ No

Specification

Attribute

Type

Default

Options

Description

legend

text

Add a legend to describe the contents of the fieldset

Slots

Type

Anonymous

ns-inputters

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!

Related links