Forms

Dashkit supports all of Bootstrap's default form styling in addition to a handful of new input types and features. Please read the official documentation for a full list of options from Bootstrap's core library.

Floating labels

Create beautifully simple form labels that float over your input fields.

Validation

Indicate invalid and valid form fields with .is-invalid and .is-valid classes.

Looks good!
Looks good!
Please provide a valid city.
Please provide a valid state.
You must agree before submitting.

Rounded Dashkit only

Round form control corners with the .form-control-rounded modifier.

<input type="text" class="form-control form-control-rounded" placeholder="Form control rounded">

Flush Dashkit only

Remove vertical padding and borders from a form control with the .form-control-flush modifier.

<input type="text" class="form-control form-control-flush" placeholder="Form control flush">

Auto Dashkit only

Remove vertical padding and set form control's height to auto with the .form-control-auto modifier.

<input type="text" class="form-control form-control-flush form-control-auto" placeholder="Form control auto">

Input group merge Dashkit only

A slightly modified version of the default input groups that always keeps icons as a part of the form control.

<div class="input-group input-group-merge input-group-reverse mb-3">
  <input class="form-control" placeholder="Input group reverse" type="text" aria-label="Input group reverse" aria-describedby="inputGroupReverse">
  <div class="input-group-text" id="inputGroupReverse">
    <span class="fe fe-eye"></span>
  </div>
</div>

<div class="input-group input-group-merge mb-3">
  <input class="form-control" placeholder="Input group appended" type="text" aria-label="Input group appended" aria-describedby="inputGroup">
  <div class="input-group-text" id="inputGroup">
    <span class="fe fe-lock"></span>
  </div>
</div>

<div class="input-group input-group-merge input-group-reverse mb-3">
  <input class="form-control is-valid" placeholder="Input group reverse" type="text" aria-label="Input group reverse" aria-describedby="inputGroupValid">
  <div class="input-group-text" id="inputGroupValid">
    <span class="fe fe-eye"></span>
  </div>
</div>

<div class="input-group input-group-merge">
  <input class="form-control is-invalid" placeholder="Input group appended" type="text" aria-label="Input group appended" aria-describedby="inputGroupInvalid">
  <div class="input-group-text" id="inputGroupInvalid">
    <span class="fe fe-lock"></span>
  </div>
</div>

Switch

Replaces a standard checkbox input with a toggle switch.

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

Date picker Dashkit only Plugin

A simple yet powerful datepicker powered by the Flatpickr JavaScript plugin. You can pass any options supported by the plugin via the data-flatpickr attribute. The value must be a valid JSON object. Please read the official plugin documentation for a full list of options.

<input type="text" class="form-control" placeholder="Flatpickr example" data-flatpickr">

<input type="text" class="form-control" placeholder="Flatpickr range example" data-flatpickr='{"mode": "range"}'>

Input masking Dashkit only Plugin

Mask your form controls depending on the context with the Inputmask plugin. Please read the official plugin documentation for a full list of options.

<input type="text" class="form-control mb-3" placeholder="$0.00" data-inputmask="'alias': 'currency', 'numericInput': 'true', 'prefix': '$'">

<input type="text" class="form-control mb-3" placeholder="(___)___-____" data-inputmask="'mask': '(999)999-9999'">

<input type="text" class="form-control" placeholder="__/__/____" data-inputmask="'mask': '99/99/9999'">

Rich text editor Dashkit only Plugin

Powerful WYSIWYG text editor powered by Quill. You can pass any options supported by the plugin via the data-quill attribute. The value must be a valid JSON object. Please read the official plugin documentation for a full list of options.

<div data-quill='{"placeholder": "Quill WYSIWYG"}'></div>

Drag and drop Dashkit only Plugin

Drag and drop file uploads with image previews powered by Dropzone.js. You can pass any options supported by the plugin via the data-dropzone attribute. The value must be a valid JSON object. Please read the official plugin documentation for a full list of options.

...
<!-- Dropzone -->
<div class="dropzone dropzone-single mb-3" data-dropzone='{"url": "https://", "maxFiles": 1, "acceptedFiles": "image/*"}'>

  <!-- Fallback -->
  <div class="fallback">
    <div class="custom-file">
      <input type="file" class="form-control" id="projectCoverUploads">
      <label class="form-label" for="projectCoverUploads">Choose file</label>
    </div>
  </div>

  <!-- Preview -->
  <div class="dz-preview dz-preview-single">
    <div class="dz-preview-cover">
      <img class="dz-preview-img" src="data:image/svg+xml,%3csvg3c/svg%3e" alt="..." data-dz-thumbnail>
    </div>
  </div>

</div>

<!-- Dropzone -->
<div class="dropzone dropzone-multiple" data-dropzone='{"url": "https://"}'>

  <!-- Fallback -->
  <div class="fallback">
    <div class="custom-file">
      <input type="file" class="form-control" id="customFileUploadMultiple" multiple>
      <label class="form-label" for="customFileUploadMultiple">Choose file</label>
    </div>
  </div>

  <!-- Preview -->
  <ul class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush">
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">

          <!-- Image -->
          <div class="avatar">
            <img class="avatar-img rounded" src="data:image/svg+xml,%3csvg3c/svg%3e" alt="..." data-dz-thumbnail>
          </div>

        </div>
        <div class="col ms-n3">

          <!-- Heading -->
          <h4 class="mb-1" data-dz-name>...</h4>

          <!-- Text -->
          <small class="text-muted" data-dz-size>...</small>

        </div>
        <div class="col-auto">

          <!-- Dropdown -->
          <div class="dropdown">
            <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fe fe-more-vertical"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end">
              <a href="#" class="dropdown-item" data-dz-remove>
                Remove
              </a>
            </div>
          </div>

        </div>
      </div>
    </li>
  </ul>

</div>

Choices Dashkit only Plugin

A vanilla, lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency. You can pass any options supported by the plugin via the data-choices attribute. The value must be a valid JSON object. Please read the official plugin documentation for a full list of options.

<select class="form-select mb-3" data-choices>
  <option>My first option</option>
  <option>Another option</option>
  <option>Third option is here</option>
</select>

<select class="form-select mb-3" data-choices='{"searchEnabled": false, "choices": [
  {
    "value": "Dianna Smiley",
    "label": "Dianna Smiley",
    "customProperties": {
      "avatarSrc": "{{webRoot}}/assets/img/avatars/profiles/avatar-1.jpg"
    }
  },
  {
    "value": "Ab Hadley",
    "label": "Ab Hadley",
    "customProperties": {
      "avatarSrc": "{{webRoot}}/assets/img/avatars/profiles/avatar-2.jpg"
    }
  },
  {
    "value": "Adolfo Hess",
    "label": "Adolfo Hess",
    "customProperties": {
      "avatarSrc": "{{webRoot}}/assets/img/avatars/profiles/avatar-3.jpg"
    }
  },
  {
    "value": "Daniela Dewitt",
    "label": "Daniela Dewitt",
    "customProperties": {
      "avatarSrc": "{{webRoot}}/assets/img/avatars/profiles/avatar-4.jpg"
    }
  }
]}'></select>

<select class="form-control mb-4" data-choices='{"removeItemButton": true}' multiple>
  <option>CSS</option>
  <option>HTML</option>
  <option>JavaScript</option>
  <option>Bootstrap</option>
</select>

<select class="form-control form-control-lg mb-3" data-choices='{"removeItemButton": true}' multiple>
  <option>CSS</option>
  <option>HTML</option>
  <option>JavaScript</option>
  <option>Bootstrap</option>
</select>

<select class="form-select form-select-sm mb-4" data-choices>
  <option>My first option</option>
  <option>Another option</option>
  <option>Third option is here</option>
</select>

<select class="form-control is-valid mb-3" data-choices='{"removeItemButton": true}' placeholder="Valid input" multiple>
  <option value="">Valid input</option>
  <option>CSS</option>
  <option>HTML</option>
  <option>JavaScript</option>
  <option>Bootstrap</option>
</select>

<select class="form-select is-invalid" data-choices>
  <option value="">Invalid input</option>
  <option>My first option</option>
  <option>Another option</option>
  <option>Third option is here</option>
</select>