ns-form-group
Introduction#
The form group 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 |
|---|---|
Provide a legend property with value | Group unrelated ns-inputters |
Only use inside the ns-form component | Nest ns-form-groups unnecessarily, as this can lead to confusion |
Considerations of best practises#
The legend property is required to make the form group component accessible.
Usage#
Component placement#
The ns-form-group component can only be used in the ns-form component.
Note#
When adding radio buttons and checkboxes to ns-inputter inside an ns-form-group, its heading size will match the size of all labels from other ns-inputter. This helps keep a logical visual hierarchy in a form.
Specification#
| Attribute | Property | Type | Default | Options | Description |
|---|---|---|---|---|---|
legend | legend | text | Add a legend to describe the contents of the form group |
| 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.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.