components

Radio Buttons

Allows a user to select one option from a list.

Primary Radio Buttons

 
  • <div class="primary_radio">
<form class="lp__radio" action="">
    <input class="lp__primary_radio" type="radio" id="radio" name="sample" value="radio"/>
    <label for="radio">Radio Buttons</label>
</form>
</div>
  • Allows a user to select one option from a list. Like checkboxes, Radio Buttons can be grouped in either a vertical or horizontal configuration, or in a grid of columns and rows in instances with a large number of options, but in many cases a drop-down list may be the better solution.
  • EXAMPLE
Primary Radio Group Buttons
Radio Button 

  • <form action="">
    <fieldset class="primary_radio">
<legend class="lp__sr_only">Radio Button</legend>
<div class="lp__radio">
    <input class="lp__primary_radio" type="radio" id="Disabled" name="radio-group-example" value="Disabled" disabled="disabled"/>
    <label for="Disabled">Disabled Radio</label>
</div>
<div class="lp__radio">
    <input class=" lp__primary_radio" type="radio" id="Unselected" name="radio-group-example" value="Unselected" />
    <label for="Unselected">Unselected Radio</label>
</div>
<div class="lp__radio">
    <input class=" lp__primary_radio" type="radio" id="Selected" name="radio-group-example" value="Selected" checked="checked" />
    <label for="Selected">Selected Radio</label>
</div>
<div class="lp__radio">
    <input class=" lp__primary_radio" type="radio" id="Disabled-Selected" name="radio-group-example" value="Disabled-Selected" disabled="disabled" />
    <label for="Disabled-Selected">Disabled Selected Radio</label>
</div>
</fieldset>
</form>
  • DESIGNER
  • EXAMPLE
Primary Radio Group Buttons
Radio Button 

  • <form action="">
<fieldset class="primary_radio">
<legend class="lp__sr_only">Radio Button</legend>
<div class="lp__radio_inline">
    <input class="lp__primary_radio" type="radio" id="Disabled-1" name="time" value="Disabled-1" disabled="disabled"/>
    <label for="Disabled-1">Disabled Radio</label>
</div>
<div class="lp__radio_inline">
    <input class=" lp__primary_radio" type="radio" id="Unselected-1" name="time" value="Unselected-1"/>
    <label for="Unselected-1">Unselected Radio</label>
</div>
<div class="lp__radio_inline">
    <input class=" lp__primary_radio" type="radio" id="Selected-1" name="time" value="Selected-1" checked="checked"/>
    <label for="Selected-1">Selected Radio</label>
</div>
<div class="lp__radio_inline">
    <input class=" lp__primary_radio" type="radio" id="Disabled-Selected-1" name="time" value="Disabled-Selected-1" checked="checked" disabled="disabled" />
    <label for="Disabled-Selected-1">Disabled Selected Radio</label>
</div>
</fieldset>
</form>
  • DESIGNER
  • EXAMPLE
Primary Inverse Radio Buttons

Using various options for customizing in background color add .primary_inverse_radio class.

Radio Button