form

The indispensable form controls

radio



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

Make sure the linked radio buttons have the same value for their name HTML attribute.

                    

                        
                        <div class="control">
                          <label class="radio">
                            <input type="radio" name="answer">
                            Yes
                          </label>
                          <label class="radio">
                            <input type="radio" name="answer">
                            No
                          </label>
                        </div>
                        

                    
                

You can check a radio button by default by adding the checked HTML attribute to the <input> element.

                    

                        
                        <div class="control">
                          <label class="radio">
                            <input type="radio" name="foobar">
                            Foo
                          </label>
                          <label class="radio">
                            <input type="radio" name="foobar" checked>
                            Bar
                          </label>
                        </div>
                        

                    
                    

You can add disable a radio button by adding the disabled HTML attribute to both the <label> and the <input>.

                    

                        
                        <div class="control">
                          <label class="radio">
                            <input type="radio" name="rsvp">
                            Going
                          </label>
                          <label class="radio">
                            <input type="radio" name="rsvp">
                            Not going
                          </label>
                          <label class="radio" disabled>
                            <input type="radio" name="rsvp" disabled>
                            Maybe
                          </label>
                        </div>
                        

                    
                    

custom radio



                    

                        
                       <div class="field">
                          <input class="is-checkradio" id="exampleRadioInline1" type="radio" name="exampleRadioInline" checked="checked">
                          <label for="exampleRadioInline1">Option 1</label>
                          <input class="is-checkradio" id="exampleRadioInline2" type="radio" name="exampleRadioInline">
                          <label for="exampleRadioInline2">Option 2</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="exampleRtlRadioInline1" type="radio" name="exampleRtlRadioInline" checked="checked">
                          <label for="exampleRtlRadioInline1">Option 1</label>
                          <input class="is-checkradio is-rtl" id="exampleRtlRadioInline2" type="radio" name="exampleRtlRadioInline">
                          <label for="exampleRtlRadioInline2">Option 2</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




No 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
حفل زفاف
View more
Joo - Niche Multi-Purpose HTML Template مفعل
شركات 02
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