@ebay/skin/switch

DS v2.1

A switch behaves a bit like a checkbox - it can be on or off (i.e checked or unchecked). The key difference is that a switch is not a true form control. It typically executes JavaScript on the client when toggled (i.e. without a full page reload) rather than storing form data to be sent to the server.

Whereas checkboxes are often used to allow multi-selection from a group of choices, switches are more often used in isolation or as a series of unrelated options.

A switch requires the switch role and aria-checked attribute for assistive technology.

REMEMBER: every switch requires a visible, programmatic label to indicate its purpose.

Default Switch

The default version of the switch requires JavaScript to maintain the aria-checked state when clicked.

The switch__control child element requires a tabindex value of 0 (zero) to be keyboard focusable.

Disabled Switch

To disable a switch, apply the aria-disabled attribute.

The tabindex property must be set to -1 (negative one) to prevent keyboard focus.

Checkbox Switch

This version of the switch uses a checkbox under the hood. It should be used if you require the switch to store data inside of a form. As mentioned above however, this is not the intended purpose of a switch. You may wish to consider using an actual checkbox instead.

Disabled Checkbox Switch

To disable a checkbox switch, apply the disabled attribute.

Custom Properties of Switch ^EXPERIMENTAL

The following custom properties (aka CSS Variables) are available for system color-scheme appearance (i.e. light-mode & dark-mode) and other general theming purposes: