هما بلغ تعقيد الفكرة؛ فإنّي أرى أنّ تبسيطها حتمي. الفكرة قبل أن تتحوّل إلى منتج، أو حتّى قبل أن تنفّذ؛ ينبغي أن يحدّد عنصرها أو عَناصرها الأهم.

لا أخفيك أنّي أحب تصفّح الويب من جهاز الحاسوب؛ لكن هذا لا يجعله مفضّلاً و مقدّمًا دائمًا.

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.

Yes No

                    

                        
                        <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.

Foo Bar

                    

                        
                        <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>.

Going Not going Maybe

                    

                        
                        <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

Option 1 Option 2

                    

                        
                       <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)

Option 1 Option 2

                    

                        
                       <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.

Full Documentation

إبداعى 01

شركات 01

مطعم برجر

حفل زفاف

شركات 02

صالون حلاقة

شركة شحن

مطعم 01

منظم حفلات

شركة شحن 02

إبداعى 02

فساتين الزفاف

إبداعى 03

تحت الإنشاء

أخر الاخبار

media