Form Elements

Text InputSelect InputSearch Input - LiveSearch Input - ClickCheckboxesRadio ButtonsSwitches (Toggles)Multi Select Dropdown

Text Input

<input class="form-control form-control-lg" type="text" placeholder="Large Text Input" />

<input class="form-control" type="text" placeholder="Default Text Input" />

<input class="form-control form-control-sm" type="text" placeholder="Small Text Input" />


Select Input

<select class="form-control form-control-lg">
    <option>Large Select</option>
</select>

<select class="form-control">
    <option>Default Select</option>
</select>

<select class="form-control form-control-sm">
    <option>Small Select</option>
</select>


Search Input - Live

<div class="search-box live-search">
   <input type="search" class="form-control form-control-lg" placeholder="Search" data-ng-model="search" />
   <span class="clear-input" data-ng-show="search.length > 0" data-ng-click="search = ''"></span>
</div>

<div class="search-box live-search">
   <input type="search" class="form-control" placeholder="Search" data-ng-model="search" />
   <span class="clear-input" data-ng-show="search.length > 0" data-ng-click="search = ''"></span>
</div>

<div class="search-box live-search">
   <input type="search" class="form-control form-control-sm" placeholder="Search" data-ng-model="search" />
   <span class="clear-input" data-ng-show="search.length > 0" data-ng-click="search = ''"></span>
</div>


Search Input - Click

<div class="input-group">
   <div class="search-box click-search">
      <input type="search" class="form-control form-control-lg" placeholder="Search" data-ng-model="search" />
      <div class="clear-input" data-ng-show="search.length > 0" data-ng-click="search = ''"></div>
      <div class="input-group-append">
         <button class="btn btn-search-lg" type="button" ng-click=""></button>
      </div>
   </div>
</div>

<div class="input-group">
   <div class="search-box click-search">
      <input type="search" class="form-control" placeholder="Search" data-ng-model="search" />
      <div class="clear-input" data-ng-show="search.length > 0" data-ng-click="search = ''"></div>
      <div class="input-group-append">
         <button class="btn btn-search" type="button" ng-click=""></button>
      </div>
   </div>
</div>

<div class="input-group">
   <div class="search-box click-search">
      <input type="search" class="form-control form-control-sm" placeholder="Search" data-ng-model="search" />
      <div class="clear-input" data-ng-show="search.length > 0" data-ng-click="search = ''"></div>
      <div class="input-group-append">
         <button class="btn btn-search-sm" type="button" ng-click=""></button>
      </div>
   </div>
</div>


Checkboxes

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" />
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled />
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Radio Buttons

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked />
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" />
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled />
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Switches (Toggles)

ActiveDisabled
<md-switch md-no-ink="true" ng-model="isActive">Active</md-switch>
<md-switch ng-disabled="true" ng-model="isDisabled">Disabled</md-switch>

Multi Select Dropdown


<div isteven-multi-select input-model="selectionInput" output-model="selectionOutput" tick-property="ticked"></div>