JavaScript Toggle Switch Button - HTML5 ON-OFF Switch Control

Overview

The JavaScript Toggle Switch Button control is a custom HTML5 input-type checkbox control that allows you to perform a toggle (on/off) action between checked and unchecked states. It supports different sizes, labels, label positions, and UI customization.

Custom Switch labels, colors and width

The appearance of the JavaScript Toggle Switch Button control (bar and handle) can be fully customized. A switch can contain text to represent checked/unchecked states (ON/OFF). The look and feel of the switch can be changed to

• Windows Switch
• iOS Switch
• Android Switch

• Customization of Toggle Switch Button bar and handle documentation

Forms support

The JavaScript Toggle Switch Button seamlessly supports HTML forms, template-driven forms (Angular), and reactive forms.

Other supported frameworks

The Toggle Switch Button control is also available in Blazor, React, Angular, and Vue frameworks. Check out the different Toggle Switch Button platforms from the links below,

• Blazor Toggle Switch Button

• React Toggle Switch Button

• Angular Toggle Switch Button

• Vue Toggle Switch Button

Web Accessibility

• Fully supports WAI-ARIA accessibility to work with on-screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• In Switch, Space key toggle states between checked and unchecked.
• The UI element visuals such as foreground color, background color, line spacing, text, and images are designed based on WCAG 2.0.
• The Toggle Switch Button supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

JavaScript Toggle Switch Button Code Example

Easily get started with the JavaScript Toggle Switch Button using a few simple lines of HTML and TS code, as demonstrated below. Also explore our JavaScript Toggle Switch Button Example that shows you how to render and configure the Toggle Switch Button in JavaScript.

<div>
    <!--element which is going to render-->
    <input id="element" type="checkbox"/>
</div>

import { Switch } from '@syncfusion/ej2-buttons';

// Initialize Switch component with checked state.
let switchObj: Switch = new Switch({ checked: true });

// Render initialized Switch.
switchObj.appendTo('#element');