Radiobutton

Radiobutton controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the <input> tag, and classes should follow on from the surrounding <div> and <label>.

Style	Attribute	Value	Example

Standard			Radiobutton
Standard - Label First			Radiobutton
Standard - Left aligned			Radiobutton
Disabled	class disabled	disabled disabled	Radiobutton checked
Invalid	class	invalid	Radiobutton disabled
Disabled and Checked	class	disabled checked	Radio button checked and disabled

    
      <div class="form-group radio">
        <input type="radio" class="form-control" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" value="">
        <label for="<!-- Input control ID goes here -->">
          <span class="radio-icon"></span>
          <!-- Label text goes here -->
        </label>
      </div>

Radiobutton controls also can contain custom values as demonstrated below.

    
      <div class="form-group radio label-first">
        <input type="radio" class="form-control" id="<!-- First input control ID goes here -->" name="<!-- Input control name goes here -->" value="1">
        <label for="<!-- First input control ID goes here -->">
          <span class="radio-icon"></span>
          <!-- Label text goes here -->
        </label>
        <input type="text" class="form-control" name="<!-- Input text control name goes here -->" value="" />
      </div>
      <div class="form-group radio invalid">
        <input type="radio" class="form-control" id="<!-- Second input control ID goes here -->" name="<!-- Input control name goes here -->" value="2">
        <label for="<!-- Second input control ID goes here -->" class="invalid">
          <span class="radio-icon"></span>
          <!-- Label text goes here -->
        </label>
        <input type="text" class="form-control" name="<!-- Input text control name goes here -->" value="" />
      </div>