ba-form-group

ba-form-group is used to show that group of form elements are related

<form>
  <ba-form-group legend="Form group legend">
    HTML for form elements goes here
  </ba-form-group>
</form>

The ba-form-group component is a stylised native fieldset. Find out more about it here:

The legend text helps users of assistive technologies understand that this component is a group of related form fields.

In high contrast mode:

Guidelines

Grouping related fields together under headings and with defined boundaries helps users understand information on long forms.

Examples of when it could be used:

Property	Attribute	Description	Type	Default
`hintText`	`hint-text`	Hint text to show under the legend	`string \| undefined`	`undefined`
`legend`(required)	`legend`	Text to describe the form elements in the form group	`string`	`undefined`

Slot	Description	Permitted elements
Unnamed slot	Elements will render in the body of the component	`<ba‑button>`, `<ba‑checkbox>`, `<ba‑checkbox‑card>`, `<ba‑checkbox‑list>`, `<ba‑content>`, `<ba‑details>`, `<ba‑flex>`, `<ba‑grid>`, `<ba‑input>`, `<ba‑input‑date>`, `<ba‑input‑datepicker>`, `<ba‑input‑email>`, `<ba‑input‑number>`, `<ba‑input‑password>`, `<ba‑input‑phone‑number>`, `<ba‑input‑stepper>`, `<ba‑input‑text>`, `<ba‑input‑textarea>`, `<ba‑input‑typeahead>`, `<ba‑input‑upload>`, `<ba‑radio‑group>`, `<ba‑select>`

ba-form-group can be slotted into:

Ba-form-group must always be placed in a form and will always consist of a legend and a number of related form elements

A basic example of ba-form-group nested in a form

<form>

  ...

  <ba-form-group legend="Legend Text">
    <!-- Form elements  -->
  </ba-form-group>

  ...

</form>