Custom Radio Buttons Components

Radio Buttons

<div class="radio-group"> <label class="radio-label"> <input type="radio" name="radio-group" class="radio-input" checked> <span class="radio-custom"></span> <span class="label-text">Option 1</span> </label> <label class="radio-label"> <input type="radio" name="radio-group" class="radio-input"> <span class="radio-custom"></span> <span class="label-text">Option 2</span> </label> <label class="radio-label"> <input type="radio" name="radio-group" class="radio-input"> <span class="radio-custom"></span> <span class="label-text">Option 3</span> </label> <label class="radio-label disabled"> <input type="radio" name="radio-group" class="radio-input" disabled> <span class="radio-custom"></span> <span class="label-text">Disabled option</span> </label> </div>

Radio Button Inline

<div class="radio-group radio-group--inline"> <label class="radio-label"> <input type="radio" name="radio-group1" class="radio-input" checked> <span class="radio-custom"></span> <span class="label-text">Option 1</span> </label> <label class="radio-label"> <input type="radio" name="radio-group1" class="radio-input"> <span class="radio-custom"></span> <span class="label-text">Option 2</span> </label> <label class="radio-label"> <input type="radio" name="radio-group1" class="radio-input"> <span class="radio-custom"></span> <span class="label-text">Option 3</span> </label> <label class="radio-label disabled"> <input type="radio" name="radio-group1" class="radio-input" disabled> <span class="radio-custom"></span> <span class="label-text">Disabled option</span> </label> </div>