JavaScript Toggle Switch Button - HTML5 ON-OFF Switch Control

• Fully customizable UI with checked and unchecked states.
• Customize the label content with built-in API’s.
• Comes with industry standard themes-Material, Fabric and Bootstrap.

JavaScriptjs toggle switch button

• VIEW DEMOS
• BUY NOW
• FREE TRIAL

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 supportsWAI-ARIA accessibility to work with on-screen readers and assistive devices.
• FollowsWAI-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 onWCAG 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 ourJavaScript 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--><inputid="element"type="checkbox"/></div>

import{Switch}from'@syncfusion/ej2-buttons';// Initialize Switch component with checked state.letswitchObj:Switch=newSwitch({checked:true});// Render initialized Switch.switchObj.appendTo('#element');

Transform your applications today by downloading our free evaluation version

Download Free TrialNo credit card required.