ba-form-group-dropdown

ba-form-group-dropdown is used to show/hide a group of related form elements

<form>
  <ba-form-group-dropdown
      legend="Label Text"
      hint-text="Hint text"
      summary="Summary Text"
    >
    <p slot="error">Custom error</p>
    <ba-input-text label="Form inputs go in here"></ba-input-text>
  </ba-form-group-dropdown>
</form>

This will help users understand the overall status of all of the inputs inside of ba-form-group-dropdown.

The legend acts as a reference point within the form / page. If it is updated then users may lose their position or fail to find it again when want togo back and update it

Instead of using with a single input; use the input directly in the form

As this component appears over the top of other content it may obstruct the user from seeing other important information.

The component is easily dismissible (i.e. clicking off of the component). If the open state is triggered by javascript, it may flash, or appear briefly and then disappear.

If there is an error message on one of the nested inputs this should be reflected in the ba‑form‑group‑dropdown error message as either:

the same message again
a summary of multiple nested input errors

The legend and summary are used with the aria group role to help users of assistive technologies understand the relationship between the slotted inputs and their current value

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role

The summary makes use of aria-live="polite" to let screen reader users understand that the value for the dropdown has changed

In high contrast mode:

The icon, legend and summary text use the browser default colour for text
A border is added around the expanded contents

Element	State	Key press	Behaviour
`<button>` in shadow	button in shadow has focus	`Enter`	Toggles the open / close state of the component
`<button>` in shadow	button in shadow has focus	`Space`	Toggles the open / close state of the component

On devices with a width of 1024px and larger
Element	State	Key press	Behaviour
Last focusable slotted component	Component is open and the last focusable element in the component has focus	`Tab`	Closes the component and focus moves to the next focusable component on the page
`<button>` in shadow	Component is open and and button in shadow has focus	`Tab + Shift`	Closes the component and focus moves to the previous focusable component on the page
Any	Component is open	`Escape`	Closes the component

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`hintText`	`hint-text`	Hint text to show above the input	`string \| undefined`	`undefined`
`invalid`	`invalid`	Show error state	`boolean \| undefined`	`false`
`legend`(required)	`legend`	A legend for the dropdown	`string`	`undefined`
`summary`(required)	`summary`	Sets the summary	`string`	`undefined`

Events

Event	Description	Type
`baBlur`	Emitted when the input loses focus.	`CustomEvent<void>`
`baFocus`	Emitted when the input has focus.	`CustomEvent<void>`

Slots

Slot	Description	Permitted elements
Unnamed slot	Elements will render in the body of the component	`<ba‑checkbox‑card>`, `<ba‑checkbox‑list>`, `<ba‑content>`, `<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>`
`"error"`	Validation message shown when `show-error` is present	`<p>`

Note: <ba-input-stepper> fills the container rather than use the default ba-input-stepper maximum width

Parent components

ba-form-group-dropdown can be slotted into:

Usage

Ba-form-group-dropdown must always be placed in a form and will always consist of a legend, summary and a number of form inputs to show when opened

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

<form>
  ...

  <ba-form-group-dropdown legend="Label Text" hint-text="Hint text" summary="Summary Text">
    <p slot="error">Custom error</p>

    <!-- Form inputs to be shown when opened -->
  </ba-form-group-dropdown>

  ...

</form>