Group

Set role="group" on a <fieldset>, a <div> or any container and its children are joined into one row. Neighbors share their borders and only the outer corners stay rounded. Focus shows one ring around the whole group instead of one per control.

<fieldset role="group">
  <input type="email" placeholder="Enter your email" aria-label="Email" />
  <input type="submit" value="Subscribe" />
</fieldset>

Buttons#

A group of buttons works the same way. A secondary or contrast button changes the focus ring color of the group.

<div role="group">
  <button>Save</button>
  <button class="secondary">Save as</button>
  <button class="contrast">Share</button>
</div>

Mixed controls#

Selects, inputs and buttons can sit in the same group.

<fieldset role="group">
  <select aria-label="Month">
    <option>Month</option>
    <option>January</option>
  </select>
  <input type="number" placeholder="Year" aria-label="Year" />
  <button type="button" class="contrast">Add</button>
</fieldset>

Search#

role="search" is a group with pill-shaped ends. Use it on a <form> or a <div>.

<form role="search" onsubmit="return false">
  <input name="q" type="search" placeholder="Search" aria-label="Search" />
  <input type="submit" value="Search" />
</form>

Notes#

A group is display: inline-flex at full width, and each child gets flex: 1 1 auto. Buttons keep their natural width and get more horizontal padding. Checkboxes and radios are left alone. The same markup works in the class-less build. For whole forms, see the forms overview.

Give every control in a group an accessible name. A placeholder is not one, so add aria-label or a visible label.

Customization#

--pico-group-box-shadow

0 0 0 0 oklch(0 0 0 / 0)

Shadow around the group. The focus ring replaces it while a control has focus.

--pico-group-box-shadow-focus-with-button

0 0 0 var(--pico-outline-width) var(--pico-background-color), 0 0 0 calc(var(--pico-outline-width) * 2) var(--pico-primary-focus)

Ring used when a button has focus.

--pico-group-box-shadow-focus-with-input

0 0 0 0.1875rem color-mix(in oklab, var(--pico-form-element-focus-color) 25%, transparent)

Ring used when an input or select has focus.

--pico-border-radius

0.5rem

Outer corner radius. Search sets it to 5rem.