Radio

The mutually exclusive radio buttons in their native format with style for vue

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.

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

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

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

#1

#2

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

#2
<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>

#3
<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>