Toggle button group

v1.1

A toggle button group is a single and multi selection pattern that provides increased visual emphasis for the available choices.

  • Skin
  • Marko
  • React
Stylized artwork of a toggle button group.

Guidelines

Our accessibility section covers only the key considerations that impact design thinking at a page level, such as keyboard interaction, heading structure and landmarks. For exhaustive pattern level details & guidance for the web, please visit eBay MIND Patterns.

Forms

Developers should avoid using this pattern in a form as buttons are not form inputs (unlike checkboxes & radios) and are unable to store form data.

Keyboard interaction

Toggle buttons are navigated with TAB key only; they are not operable with ARROW keys.

A toggle button is toggled using the ENTER or SPACEBAR key.

Tab sequence

  1. Toggle button 1
  2. Toggle button 2
  3. Toggle button 3
  4. etc
A group of toggle buttons in states of rest, selection and focus.