# Segmented Buttons

<div align="center"><figure><img src="/files/q3qP1PrfW7cZQLO5M3C0" alt="Screenshot 1 - Controlling a Chart"><figcaption><p>Screenshot 1 - Controlling a Chart</p></figcaption></figure></div>

<figure><img src="/files/qAP1ZxVTqo6he3h96aWb" alt="Screenshot 2 - Controlling Forms"><figcaption><p>Screenshot 2 - Branching Content</p></figcaption></figure>

### Introduction

Segmented buttons are a list of JavaScript-based buttons; their purpose is to control the state of an object (e.g. a chart) or the visibility of section content (e.g. branching content).

### Best Practices

Segmented buttons are not form controls; although they can be used within a form to provide branching capabilties, they do not store and submit form data.

Segmented buttons are not a drop-in replacement for tabs, nor do they operate like tabs. Tabs and Segmented Buttons solve two different problems.

### Terminology

**Segmented Buttons:** The pattern as a whole, a list containing two or more segments (upto a maxium of four)

**Segment**: A regular HTML button (type=button)&#x20;

**Current Segment**: The button in the group that is currently active

### Working Examples

Experience the pattern in action on our [eBay MIND patterns examples website](https://opensource.ebay.com/mindpatterns/disclosure/segmented-buttons/index.html).

Examine the required markup structure on the [bones GitHub project](https://github.com/ianmcburnie/bones#user-content-segmented-buttons).

View a fully styled example on the [eBay Skin website](https://opensource.ebay.com/skin/component/segmented-button/).

### Interaction Design

Even though visually styled as a group, each button has normal button interactions (i.e. they each live in the normal tab order of the page) that triggers arbitrary JavaScript logic.

The only thing to set them apart from a normal button, is that "clicking" one segment will unset the current segment (the state is conveyed with the `aria-current` attribute).

### Developer Guide 1 - Controlling a Chart

The segmented buttons are formed together in a list, with one button marked as current:

```markup
<h2>Price Guidance</h2>
<div class="segmented-button">
    <ul>
        <li><button type="button">1D</button></li>
        <li><button type="button">3W</button></li>
        <li><button type="button" aria-current="true">1M</button></li>
        <li><button type="button">1Y</button></li>
    </ul>
</div>
<div>
    <!-- some chart/graph -->
</div>
```

Under development.

### Developer Guide 2 - Controlling Page Flow

Again, the segmented buttons are formed together in a list, with one button marked as current:

```markup
<h2>Create An Account</h2>
<div class="segmented-button">
    <ul>
        <li><button type="button" aria-current="true">Personal</button></li>
        <li><button type="button">Business</button></li>
    </ul>
</div>
<form>
    <!-- form fields change depending on selection -->
</form>
```

Under development.

### ARIA Reference

**aria-current=true**

Conveys the currently pressed segment.


---

# Agent Instructions: 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:

```
GET https://ebay.gitbook.io/mindpatterns/disclosure/segmented-buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.