form

The indispensable form controls

switch




                    

                        
                       <div class="field">
						  <input id="switchExample" type="checkbox" name="switchExample" class="switch" checked="checked">
						  <label for="switchExample">Switch example</label>
						</div>
                        

                    
                    

Use is-rtl to display a right-to-left design of checkbox (text at left)


                    

                        
                      <div class="field">
						  <input id="switchRtlExample" type="checkbox" name="switchRtlExample" class="switch is-rtl" checked="checked">
						  <label for="switchRtlExample">Switch example</label>
						</div>
                        

                    
                    

Don't forget to set the id attribute on input and the for attribute on label with the same value to get it work. This will link the label to the checkbox and then handle the click.




Colors




Styles - Thin




Styles - Rounded




Styles - Outlined




Styles - Mixed




States - Disabled







القوالب المتاحة

Joo - Niche Multi-Purpose HTML Template
إبداعى 01
View more
Joo - Niche Multi-Purpose HTML Template
شركات 01
View more
Joo - Niche Multi-Purpose HTML Template
مطعم برجر
View more
Joo - Niche Multi-Purpose HTML Template
حفل زفاف
View more
Joo - Niche Multi-Purpose HTML Template
شركات 02
View more
Joo - Niche Multi-Purpose HTML Template
صالون حلاقة
View more
Joo - Niche Multi-Purpose HTML Template
شركة شحن
View more
Joo - Niche Multi-Purpose HTML Template مفعل
مطعم 01
Joo - Niche Multi-Purpose HTML Template
منظم حفلات
View more
Joo - Niche Multi-Purpose HTML Template
شركة شحن 02
View more
Joo - Niche Multi-Purpose HTML Template
إبداعى 02
View more
Joo - Niche Multi-Purpose HTML Template
فساتين الزفاف
View more
Joo - Niche Multi-Purpose HTML Template
تحت الإنشاء
View more
Joo - Niche Multi-Purpose HTML Template
إبداعى 03
View more