Represents whether a function is activated or not (i.e. on or off).


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.

Examine the required markup structure in the GitHub bones project.

View a fully styled example on our eBay Skin website.

Interaction Design

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


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.


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.


Informs AT that this control has switch behavior.


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

Last updated