Groups

Set role="group" on a fieldset (or any container) and its children are joined: flat inner corners, borders that overlap by one border width, and one shared focus ring. Inputs and selects share the width, and buttons keep their own.

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

Mixed controls#

Inputs, selects and buttons can be combined in any order.

<fieldset role="group">
  <select name="unit" aria-label="Unit">
    <option>Kilograms</option>
    <option>Pounds</option>
  </select>
  <input type="number" name="weight" placeholder="Weight" aria-label="Weight" />
  <button type="button" class="secondary">Add</button>
</fieldset>

Search#

role="search" works the same way, with pill shaped outer ends. Put it on a form. See also Search.

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

Focus ring#

The ring is drawn on the group, not on each child. When a button inside has focus, the ring uses the color of that button (primary, .secondary or .contrast). When an input has focus, the group gets a thin border ring and the buttons get a primary border.

Accessibility#

Give each control in a group its own name with label or aria-label, since there is no visible label per control. Add aria-label or aria-labelledby on the group when it needs a name of its own.

Customization#

--pico-group-box-shadow

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

Shadow of the group. Switches to the focus shadows below.

--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)

Group shadow while 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)

Group shadow while an input has focus.

Buttons inside a group use 2rem of horizontal padding, set through --pico-form-element-spacing-horizontal.