> For the complete documentation index, see [llms.txt](https://ebay.gitbook.io/mindpatterns/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ebay.gitbook.io/mindpatterns/input/toggle-button-group.md).

# Toggle Button Group

<figure><img src="/files/WgBu3zytiaQgZq0kQr4I" alt=""><figcaption><p>Screenshot 1: Shipping Provider Toggle Buttons</p></figcaption></figure>

### 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. &#x20;

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.

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ebay.gitbook.io/mindpatterns/input/toggle-button-group.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.