Form Elements

Input Sizes

Input fields come in four sizes which can be applied with .input-xl, .input-l, .input-m, .input-s and .input-xs on the .input component itself.
<input class="input" type="text" placeholder="Placeholder text" />
<input class="input input-xl" type="text" placeholder="Placeholder text" />
<input class="input input-l" type="text" placeholder="Placeholder text" />
<input class="input input-s" type="text" placeholder="Placeholder text" />
<input class="input input-xs" type="text" placeholder="Placeholder text" />

Input With Icon

Inputs with icons are wrapped in a parent component .uiIcon which has to have the input size applied to with an additional class. For example, .input-m will have a parent element with a class .rupaicon-m. The icon has to be placed straight after the input and should be an inline SVG.
<div class="inner-icon left-icon">
     <i class="icon anticon icon-bars"></i>
     <input type="text" class="input" placeholder="Placeholder text" />
</div>

Disabled Input

Disabled inputs recieve an is-disabled class and a disabled attribute.
<input class="input" type="text" placeholder="Placeholder text" disabled />

Input With Context

Sometimes there might be the need for pre-set context to inputs.
Text label 
<div class="input-group">
     <span class="input-group-addon">Text label</span>
     <input type="text" class="input" placeholder="Placeholder text" />
</div>
Text label 
<div class="input-group">
     <input type="text" class="input" placeholder="Placeholder text" />
     <span class="input-group-addon">Text label</span>
</div>

Select Menu

Select menus come in fours sizes which are applied with .select-xl, .select-l, .select-m, .select-s and .select-xs on the .select wrapper component.
<div class="form-group">
     <select class="input">
          <option>...</option>
     </select>
</div>

Radio Button

<div class="radio radio-inline radio-primary">
     <input type="radio" name="rbTest" id="rbTest1" value="1" />
     <label for="rbTest1">...</label>
</div>
<div class="radio radio-inline radio-primary">
     <input type="radio" name="rbTest" id="rbTest2" value="2" />
     <label for="rbTest2">...</label>
</div>
<div class="radio radio-primary">
     <input type="radio" name="rbTest" id="rbTest3" value="3" />
     <label for="rbTest3">...</label>
</div>
<div class="radio radio-primary">
     <input type="radio" name="rbTest" id="rbTest4" value="4" />
     <label for="rbTest4">...</label>
</div>

Checkbox

<div class="checkbox checkbox-inline checkbox-primary">
     <input type="checkbox" name="cbTest" id="cbTest1" value="1" />
     <label for="cbTest1">...</label>
</div>
<div class="checkbox checkbox-inline checkbox-primary">
     <input type="checkbox" name="cbTest" id="cbTest2" value="2" />
     <label for="cbTest2">...</label>
</div>
<div class="checkbox checkbox-primary">
     <input type="checkbox" name="cbTest" id="cbTest3" value="3" />
     <label for="cbTest3">...</label>
</div>
<div class="checkbox checkbox-primary">
     <input type="checkbox" name="cbTest" id="cbTest4" value="4" />
     <label for="cbTest4">...</label>
</div>