Radio

For using our customized radio, you need to use .gra-custom-form-input class for input, .gra-custom-form-label class for label, .gra-custom-form-control and .radio classes for the wrapper.

Radio - 1

Radio - 2

Radio Disabled

<div role="radiogroup">
  <div class="gra-custom-form-control gra-radio">
    <input class="gra-custom-form-input" id="custom-radio" type="radio" name="radio-c"/>
    <label class="gra-custom-form-label" for="custom-radio">Radio - 1</label>
  </div>
  <div class="gra-custom-form-control gra-radio">
    <input class="gra-custom-form-input" id="custom-radio-2" type="radio" name="radio-c" />
    <label class="gra-custom-form-label" for="custom-radio-2">Radio - 2</label>
  </div>
  <div class="gra-custom-form-control gra-radio">
    <input class="gra-custom-form-input" id="custom-radio-3" type="radio" name="radio-c" disabled/>
    <label class="gra-custom-form-label" for="custom-radio-3">Radio Disabled</label>
  </div>
</div>

Colors

Radio Blue

Radio Green

Radio Yellow

Radio Red

<div role="radiogroup">
  <div class="gra-custom-form-control gra-radio blue">
    <input class="gra-custom-form-input" id="custom-radio-blue" type="radio" name="radio-color" />
    <label class="gra-custom-form-label" for="custom-radio-blue">Radio Blue</label>
  </div>
  <div class="gra-custom-form-control gra-radio green">
    <input class="gra-custom-form-input" id="custom-radio-green" type="radio" name="radio-color" />
    <label class="gra-custom-form-label" for="custom-radio-green">Radio Green</label>
  </div>
  <div class="gra-custom-form-control gra-radio yellow">
    <input class="gra-custom-form-input" id="custom-radio-yellow" type="radio" name="radio-color"/>
    <label class="gra-custom-form-label" for="custom-radio-yellow">Radio Yellow</label>
  </div>
  <div class="gra-custom-form-control gra-radio red">
    <input class="gra-custom-form-input" id="custom-radio-red" type="radio" name="radio-color"/>
    <label class="gra-custom-form-label" for="custom-radio-red">Radio Red</label>
  </div>
</div>