Toggle Button Group

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


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.


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 same interactions as radios and checkboxes.

Each button follows standard button interactions; however, its pressed state is toggled with each click.

In a single select toggle group, pressing one button will unpress any currently pressed button 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.

<div class="toggle-button-group">
            <button type="button" aria-pressed="false">
                UPS Ground
            <button type="button" aria-pressed="false">
                USPS Priority
            <button type="button" aria-pressed="true">
                Fedex Ground

Under development.

ARIA Reference


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

Last updated