Example

<label for="input1">Label for input</label>
<input type="text" class="form-control" id="input1" name="input1" />

Sizing

<input type="text" class="form-control form-control-xl" />

<input type="text" class="form-control form-control-lg" />

<input type="text" class="form-control" />

<input type="text" class="form-control form-control-sm" />

Input icons

<div class="form-control-icon form-control-icon--purple">
  <input type="text" class="form-control form-control-xl " placeholder=".form-control-xl" />
  <i class="icon icon--search-white"></i>
</div>
                

<div class="form-control-icon">
  <input type="text" class="form-control form-control-lg" placeholder=".form-control-lg" />
  <i class="icon icon--print-white"></i>
</div>
                

<div class="form-control-icon">
  <input type="text" class="form-control" placeholder="Default size" />
  <i class="icon icon--print-white"></i>
</div>
                

<div class="form-control-icon">
  <input type="text" class="form-control form-control-sm" placeholder=".form-control-sm" />
  <i class="icon icon--print-white"></i>
</div>  
                

Password

<div class="form-control-icon form-control-icon--white">
  <input type="password" class="form-control" placeholder="Password" />
  <i class="icon icon--hidden-gray"></i>
</div>  
                

Disabled

<input type="text" class="form-control" disabled />

<input type="text" class="form-control" readonly />

Textarea

<textarea cols="30" rows="3" class="form-control"></textarea>

<textarea cols="30" rows="3" class="form-control" placeholder="Example placeholder"></textarea>

Checkboxes

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="checkbox1" value="">
  <label for="checkbox1" class="form-check-label">Default checkbox</label>
</div>

<div class="form-check form-check--sm">
  <input type="checkbox" class="form-check-input" id="checkbox2" value="">
  <label for="checkbox2" class="form-check-label">Default Small checkbox</label>
</div>

Radio

<div class="form-check">
  <input type="radio" name="group-radio" class="form-check-input" id="radio1" value="">
  <label for="radio1" class="form-check-label">Default radio</label>
</div>
<div class="form-check">
  <input type="radio" name="group-radio" class="form-check-input" id="radio2" value="">
  <label for="radio2" class="form-check-label">Second radio</label>
</div>

<div class="form-check form-check--sm">
  <input type="radio" class="form-check-input" id="radio2" value="">
  <label for="radio2" class="form-check-label">Default Small radio</label>
</div>

Dropdown

<select class="form-select initDropdown" data-placeholder="Open this styled menu" data-search-placeholder="Writing search term">
  <option></option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="form-select form-select--purple initDropdown" data-placeholder="Open this styled menu" data-search-placeholder="Writing search term">
<option></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

Dropdown large sizes

<select class="form-select form-select-lg initDropdown">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
</select>
                

Dropdown extra large size

<select class="form-select form-select-xl initDropdown">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
</select>
                

Datepicker

<div class="form-control-icon">
  <input type="text" class="form-control initDatePicker" data-datepicker-locale="sl" datepicker-locale-first-day-of-week="1" data-datepicker-month-type="static" data-datepicker-position="below left" placeholder="Od" />
  <i class="icon icon--calendar-white"></i>
</div>
                

Datepicker - localization

<div class="form-control-icon">
  <input type="text" class="form-control initDatePicker" data-datepicker-locale="ru" datepicker-locale-first-day-of-week="1" data-datepicker-month-type="static" data-datepicker-position="below left" placeholder="Od" />
  <i class="icon icon--calendar-white"></i>
</div>
                

Load new language

<script src="https://npmcdn.com/flatpickr/dist/l10n/ru.js"></script>
<script>
  window.addEventListener('load', function() {
    Krka.MODULES.localizeDatepicker(ru.Russian);
  });
</script>