DashByte - Premium Dashboard Template

Forms

Tags & Masks

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Basic Tag Usage

Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.

<input type="text" class="form-control" value="Amsterdam,Washington,Sydney,Beijing" data-role="tagsinput">

Auto Suggest

Provides an auto suggest dropdown selection using Typeahead.js.

<input type="text" class="form-control" value="Amsterdam,Washington" data-role="tagsinput">

var citynames = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    url: '../assets/data/citynames.json',
    filter: function(list) {
      return $.map(list, function(cityname) {
        return { name: cityname }; }
      );
    }
  }
});

citynames.initialize();

$('#inputTypeAhead').tagsinput({
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    valueKey: 'name',
    source: citynames.ttAdapter()
  }
});

Credit Card Format

Mask a credit card input element to identify users the type of credit card.

<input id="inputCreditCard" class="form-control" type="text" placeholder="Enter credit card number">

<div id="creditCardType" class="cc-group mt-2">
  <div class="amex"><i class="fa-brands fa-cc-amex"></i></div>
  <div class="visa ms-1"><i class="fa-brands fa-cc-visa"></i></div>
  <div class="mastercard ms-1"><i class="fa-brands fa-cc-mastercard"></i></div>
  <div class="jcb ms-1"><i class="fa-brands fa-cc-jcb"></i></div>
  <div class="discover ms-1"><i class="fa-brands fa-cc-discover"></i></div>
  <div class="diners ms-1"><i class="fa-brands fa-cc-diners-club"></i></div>
</div>

new Cleave('#inputCreditCard', {
  creditCard: true,
  onCreditCardTypeChanged: function (type) {
    console.log(type)
    var card = $('#creditCardType').find('.'+type);

    if(card.length) {
      card.addClass('text-primary');
      card.siblings().removeClass('text-primary');
    } else {
      $('#creditCardType div').removeClass('text-primary');
    }
  }
});

Phone Number Format

Mask an input element to provide users or a guide for entering phone number.

US (+1)

<div class="input-group mb-3">
  <span class="input-group-text">US (+1)</span>
  <input id="inputPhoneNumber" type="text" class="form-control" placeholder="Enter phone number">
</div>

new Cleave('#inputPhoneNumber', {
  phone: true,
  phoneRegionCode: 'US'
});

Date Format

Mask an input element to provide users or a guide for entering date.

new Cleave('#inputDate', {
  date: true,
  delimiter: '-',
  datePattern: ['Y', 'm', 'd']
});

Time Format

Mask an input element to provide users or a guide for entering time.

new Cleave('#inputTime', {
  time: true,
  timePattern: ['h', 'm', 's']
});