Overview

Form Group is used to group related inputters.

Summarise it!

✨ This is an auto-generated AI summary of the ns-form-group's documentation. It may not be accurate. ✨

Use the ns-form-group component instead of the usual HTML fieldset. The ns-form-group extends the layout for ns-form.

Examples

Configure

Guidance

Do

• Include a legend.
• Only use inside the <ns-form component.

Don't

• Group unrelated <ns-inputter> components.
• Nest instances of <ns-form-group> unnecessarily, as this can lead to confusion.

Implementation

Placement

The ns-form-group component can only be used as a child of the <ns-form > form> element.

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

Attributes

legend

Property

legend

Description

The legend of the form group and needs to be related to the group of form inputs the form group wraps.

Type

string

Default

type

Property

type

Type

string

Default

standard

Slots

Slot	Permitted tags	Description
Anonymous slot	<ns-inputter> <ns-datepicker> <ns-appointment-picker> <nsx-address-selector> <ns-password>	The anonymous slot for the group of the related form inputs.

Figma

Please note: The ns-form-group Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).