Stack forms elements and buttons horizontally with
role="group" is used to stack children horizontally.
When used with the
<form> tag, the group is
.grid (see Grid), columns are not collapsed on mobile devices.
This component is mainly designed for form elements and buttons. It brings a
:focus style to the group depending on whether the focused child is an
<input> or a
:focus style relies on the
:has() CSS selector and is therefore not (yet) supported by Firefox (see on caniuse). When
:has() is not supported the children have their regular
role="search" also stacks children horizontally and brings a special style, consistent with
<input type="search" /> (see Search input).
role="group" is also useful for grouping a series of buttons.