Components

Group

Stack forms elements and buttons horizontally with role="group" and role="search".

role="group" is used to stack children horizontally.

When used with the <form> tag, the group is width: 100%;.

Unlike .grid (see Grid), columns are not collapsed on mobile devices.

<form>
  <fieldset role="group">
    <input name="email" type="email" placeholder="Enter your email" autocomplete="email" />
    <input type="submit" value="Subscribe" />
  </fieldset>
</form>

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 <button>.

The group :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 :focus style.

<form>
  <fieldset role="group">
    <input name="email" type="email" placeholder="Email" autocomplete="email" />
    <input name="password" type="password" placeholder="Password" />
    <input type="submit" value="Log in" />
  </fieldset>
</form>

Search#

role="search" also stacks children horizontally and brings a special style, consistent with <input type="search"> (see Search input).

<form role="search">
  <input name="search" type="search" placeholder="Search" />
  <input type="submit" value="Search" />
</form>

Buttons#

role="group" is also useful for grouping a series of buttons.

<div role="group">
  <button>Button</button>
  <button>Button</button>
  <button>Button</button>
</div>
<div role="group">
  <button aria-current="true">Active</button>
  <button>Button</button>
  <button>Button</button>
</div>
<div role="group">
  <button>Button</button>
  <button class="secondary">Button</button>
  <button class="contrast">Button</button>
</div>

Edit this page on GitHub