ba-form-group

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

Figma

GitHub

Storybook

Live Demo

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

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:

Passport information
Address details
Splitting by individual passenger(s) in a group

Accessibility

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

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

In high contrast mode:

The legend text uses the browser default text colour
A border is added after the legend text
A border is added around the whole component

Code

Properties & Attributes

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`

Slots

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

Permitted ARIA roles

none

Parent components

ba-form-group can be slotted into:

Usage

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>