jQuery Mobile - Slider Flip Toggle Switch

The slider flip toggle switch is used for boolean style input such as true/false or on/off.

The following table lists flip switch types used in jQuery Mobile −

Sr.No. Flip switch type & Description
1 Basic

The flip switch can be created by adding data-role = "slider" attribute in your <select>.

2 Theme

To set the theme swatch for your slider flip switch, you can add data-theme and data-track-theme attributes to the <select>.

3 Mini

For compact version of flip switch, you can add data-mini = "true" attribute to your <select>.

4 Disabled

You can disable the flip switch by adding disabled attribute to your <select>.

5 Label hidden

You can hide the label of the flip switch by adding the ui-hidden-accessible class to your <label>.

6 Fieldcontain

Adding ui-field-contain class to the div will ensure that the form to display flip switch will be rendered responsively.

7 Fieldcontain, mini

The ui-field-contain class can be added to mini flip switch to render it responsively.

Kickstart Your Career

Get certified by completing the course

Get Started