ns-fieldset
#
IntroductionThe 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 practisesA 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#
Component placementThe ns-fieldset component can only be used in the ns-form component.
#
NoteWhen 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.
#
SpecificationAttribute | 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!