# Switch

![Refinement Switch](/files/-LXQcFbkVKWbNaSkVhq1)

### Introduction

A switch typically executes JavaScript on the client when toggled rather than storing form data to be sent to the server. If you require the switch to store data inside of a form, you may wish to consider using an actual checkbox instead.

### Best Practices

Individual switch **must** have a visible, onscreen label.

Groups of *related* switch controls **must** have a group label.

### Working Examples

Experience the pattern in action on our [eBay MIND patterns examples website](https://ebay.github.io/mindpatterns/input/switch/index.html).

Examine the required markup structure in the [GitHub bones project](https://github.com/ianmcburnie/bones#switch).

View a fully styled example on our [eBay Skin website](https://opensource.ebay.com/skin/component/switch/).

### Interaction Design

This section provides interaction design for keyboard, screen reader and pointing devices.

#### Keyboard

Switch **must** be keyboard focusable (unless disabled).

If switch has keyboard focus, pressing SPACEBAR **must** toggle the checked state.

If switch has keyboard focus, pressing ENTER key toggle the checked state (optional).

If switch has keyboard focus, pressing TAB key or SHIFT-TAB key combo moves keyboard focus to next or previous interactive element on page respectively.

#### Screen Reader

Switch **must** be reachable with screen reader (even when disabled).

Switch **must** be announced as "switch".

Switch label **must** be announced.

Switch group label, if applicable, **must** be announced.

Switch state **must** be announced.

#### Pointer

Clicking switch **must** toggle the checked state.

Clicking switch label **must** toggle the checked state.

### Developer Guide

This section is not yet available.

### ARIA Reference

This section gives an overview of our use of ARIA, within the specific context of the switch pattern.

#### role=switch

Informs AT that this control has switch behavior.

**aria-checked**

Informs AT the current "checked" state of the switch.


---

# 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/input/switch.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.