Radio Button With Code Example

Colors

Blue Pink Green Yellow Red 

<div class="radio-group">
    <input type="radio" id="color1" name="color" checked>
    <label for="color1" data-color="blue"></label>Blue
    <input type="radio" id="color2" name="color">
    <label for="color2" data-color="pink"></label>Pink
    <input type="radio" id="color3" name="color">
    <label for="color3" data-color="green"></label>Green
    <input type="radio" id="color4" name="color">
    <label for="color4" data-color="yellow"></label>Yellow
    <input type="radio" id="color5" name="color">
    <label for="color5" data-color="red"></label>Red
</div>

Sizes


<div class="radio-group">
    <input type="radio" id="size1" name="size">
    <label for="size1" data-size="large"></label>
    <input type="radio" id="size2" name="size" checked>
    <label for="size2" data-size="medium"></label>
    <input type="radio" id="size3" name="size">
    <label for="size3" data-size="small"></label>
</div>

Label

Female Male Other 

<div class="radio-group">
    <input type="radio" id="female" name="gender">
    <label for="female"></label>Female
    <input type="radio" id="male" name="gender">
    <label for="male"></label>Male
    <input type="radio" id="other" name="gender" checked>
    <label for="other"></label>Other
</div>

Label placement

Top Start End Bottom 

<div class="radio-group">
    <input type="radio" id="top" name="placement">
    <label for="top"></label>Top
    <input type="radio" id="start" name="placement">
    <label for="start"></label>Start
    <input type="radio" id="end" name="placement" checked>
    <label for="end"></label>End
    <input type="radio" id="bottom" name="placement">
    <label for="bottom"></label>Bottom
</div>