form

The indispensable form controls

checkbox



The checkbox class is a simple wrapper around the <input type="checkbox"> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.

                    

                        
                        <label class="checkbox">
                          <input type="checkbox">
                          Remember me
                        </label>
                        

                    
                

You can add links to your checkbox, or even disable it.

                    

                        
                        <label class="checkbox">
                          <input type="checkbox">
                          I agree to the <a href="#">terms and conditions</a>
                        </label>
                        

                    
                    
                    

                        
                        <label class="checkbox" disabled>
                          <input type="checkbox" disabled>
                          Save my preferences
                        </label>
                        

                    
                    

custom checkbox



                    

                        
                       <div class="field">
                          <input class="is-checkradio" id="exampleCheckbox" type="checkbox" name="exampleCheckbox" checked="checked">
                          <label for="exampleCheckbox">Check me</label>
                        </div>
                        

                    
                    

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

                    

                        
                       <div class="field">
                          <input class="is-checkradio is-rtl" id="exampleRtlCheckbox" type="checkbox" name="exampleRtlCheckbox" checked="checked">
                          <label for="exampleRtlCheckbox">Check me</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




Background colored

You can add the has-background-color modifier to the input to get the checkbox background color impacted




No border

Adding the has-no-border modifier to the input will remove the checkbox border







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

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 مفعل
حفل زفاف
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
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
إبداعى 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