ba-form-group
ba-form-group is used to show that a group of form elements are related
Airframe
Web Components
React
React Native
Anatomy
Legend
Labels the group so users understand how the enclosed form elements are related
Hint text (optional)
Hint text to show under the legend
Form elements
The related form elements contained within the group
Design Documentation
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
Further Reading:
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>
Properties and 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 |
Permitted ARIA roles
- None
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‑secure‑field>, <ba‑input‑stepper>, <ba‑input‑text>, <ba‑input‑textarea>, <ba‑input‑typeahead>, <ba‑input‑upload>, <ba‑radio‑group>, <ba‑select> |
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.
Basic usage
<form>
...
<ba-form-group legend="Legend Text">
<!-- Form elements -->
</ba-form-group>
...
</form>Guidelines
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:
- 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
Keyboard navigation
No keyboard interactions have been defined for this component.
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-form-group is only used to group form elements that are related, e.g. passport information, address details, or fields for an individual passenger
- Legend text is short and clearly describes the relationship between the grouped elements
Accessibility checklist
- ba-form-group has a legend that describes the group of form elements
- Focus indicator has not been obscured on all sides of any of the enclosed form elements
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-form-group is operable using assistive technology
- Colour contrast for all states in all BAgel themes
- High contrast mode adjustments