RADIO BUTTONS

Button UnselectedButton Selected

Option

STATES

Default

Hover

Pressed

Disabled

Option

Option

Option

Option

HTMLCSS

<!-- Apply radio-box class to the div containing your input and label. -->
<div class="grid-items">
    <div class = "radio-box"> 
        <input type="radio" aria-label="example unselected radio button">
        <label for="option">Option</label>
    </div>
</div>
<div class="grid-items"> 
    <div class = "radio-box">
        <input type="radio" class="hover" aria-label="example hovered radio button">
        <label for="option">Option</label>
    </div>
</div>
<div class="grid-items">
    <div class = "radio-box"> 
        <input pressed type="radio" aria-label="example pressed radio button">
        <label for="option" class="pressed">Option</label>
    </div>
</div>
<div class="grid-items">
    <div class = "radio-box"> 
        <input disabled type="radio" aria-label="example disabled radio button">
        <label for="option">Option</label>
    </div>
</div>

.radio-box{
    font-weight: bold;
    display:flex;
    flex-direction: row;
    align-content:center;

    input{
        margin:5px;

    }
        label{
        margin:5px;
    }

}

.radio-box input[disabled] + label{
    color:gray;
}

.radio-box input:hover{
    opacity: .3;
}

Option

STATES

Default

Hover

Pressed

Disabled

Option

Option

Option

Option

HTMLCSS

<!-- Apply radio-box class to the div containing your input and label. -->
<div class="grid-items">
    <div class = "radio-box"> 
        <input type="radio" aria-label="example unselected radio button">
        <label for="option">Option</label>
    </div>
</div>
<div class="grid-items"> 
    <div class = "radio-box">
        <input type="radio" class="hover" aria-label="example hovered radio button">
        <label for="option">Option</label>
    </div>
</div>
<div class="grid-items">
    <div class = "radio-box"> 
        <input pressed type="radio" aria-label="example pressed radio button">
        <label for="option" class="pressed">Option</label>
    </div>
</div>
<div class="grid-items">
    <div class = "radio-box"> 
        <input type="radio" class="disabled" aria-label="example disabled radio button">
        <label for="option">Option</label>
    </div>
</div>

.radio-box{
    font-weight: bold;
    display:flex;
    flex-direction: row;
    align-content:center;

    input{
        margin:5px;

    }
        label{
        margin:5px;
    }

}

.radio-box input[disabled] + label{
    color:gray;
}

.radio-box input:hover{
    opacity: .3;
}