eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Introduction
  • Best Practices
  • Terminology
  • Working Examples
  • Interaction Design
  • Developer Guide
  • ARIA Reference
  1. Input

Toggle Button Group

Non-form based single & multi-select (i.e. does not store form data)

PreviousToggle ButtonNextNavigation

Last updated 4 months ago

Introduction

The toggle button group is a collection of JavaScript-based buttons; allowing single or multi-selection. The toggle button group gives a more visual emphasis on the choices available compared to form based radios and checkboxes.

Best Practices

The toggle button group is not a form control; although it can be used within a form - like all buttons - it does not store and submit form data.

The toggle button group is not a drop-in replacement for radios or checkboxes, nor does it operate like those.

Terminology

Toggle Button Group: the name of the pattern as a whole. For example, the classname would be .toggle-button-group

Toggle Button: a single button in the group. It can be pressed or unpressed.

Pressed/Unpressed: correlates to the aria-pressed attribute

Working Examples

Section under development.

Interaction Design

Even though a toggle button group is single-select or multi-select, like radios and checkboxes respectively, they do not share the exact same interactions as radios and checkboxes..

In a single select toggle group, pressing one button will unpress any currently pressed button in the group.

In a multi select toggle group, pressing a button will have no effect on any of the other buttons in the group.

Developer Guide

The toggle buttons are grouped together in a list. In this example, the third button is in a pressed state.

<h2>Shipping</h2>
<div class="toggle-button-group">
    <ul>
        <li>
            <button type="button" aria-pressed="false">
                IMAGE
                UPS Ground
                PRICE
            </button>
        <li>
            <button type="button" aria-pressed="false">
                IMAGE
                USPS Priority
                PRICE
            </button>
        <li>
            <button type="button" aria-pressed="true">
                IMAGE
                Fedex Ground
                PRICE
            </button>
        </li>
    </ul>
</div>

Under development.

ARIA Reference

aria-pressed

Conveys whether the button is pressed or not (i.e true or false)

Screenshot 1: Shipping Provider Toggle Buttons