[role="group"]

The role="group" attribute identifies a set of related user interface objects.

Unlike a toolbar, it does not enforce keyboard navigation patterns between items.

Use it to semantically cluster controls and communicate their relationship to assistive technologies.

Overview

Use role="group" to create connected groups of buttons or form elements. For search groups, see [role="search"].

Button Groups

Basic Group

<div role="group">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>

Input Groups

Input with Button

<div role="group">
  <input type="text" placeholder="Enter value">
  <button>Go</button>
</div>

Select with Button

<div role="group">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <button>Action</button>
</div>

Multiple Inputs

<div role="group">
  <input type="text" placeholder="First name">
  <input type="text" placeholder="Last name">
  <button>Save</button>
</div>

Pagination Groups

<nav aria-label="Pagination">
  <div role="group">
    <button disabled>Previous</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>Next</button>
  </div>
</nav>

Practical Examples

Newsletter Signup

<form>
  <label for="email">Subscribe to our newsletter</label>
  <div role="group">
    <input type="email" id="email" placeholder="your@email.com">
    <button type="submit">Subscribe</button>
  </div>
</form>