Form Elements

For information about Form elements you can also refer to Bootstrap's documentation.

Also for plugins such as inputmask, date pickers, etc please refer to their documentation.
See the Frameworks & Libraries section for some info and examples.

Inputs

The following extra options are available:

Floating Label

.floating-label is a placeholder that moves up and becomes smaller when input element receives focus:

The elements should be inside a .input-floating-label parent:

<div class="input-floating-label text-blue-d1 brc-blue-m1">
    <input type="text" class="form-control shadow-none" autocomplete="off" />
    <span class="floating-label text-grey-m3">Placeholder</span>
</div>

In this case, when input receives focus, the .floating-label will have the .text-blue-d1 color and the input's border will be brc-blue-m1 .

👉 You can also add .active to .floating-label, so it will be moved up and smaller by default:

<span class="floating-label text-grey-m3 active">Placeholder</span>

Border Colors

• Use custom border colors for input elements:

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

• When border is primary , success , danger , warning , info or blue , it will have a colored shadow on focus.
  • If you don't want a shadow, add .shadow-none class.

• Use .brc-on-focus so that the applied .brc-* color is applied only when input receives focus:

<input type="text" class="form-control brc-green-m1 brc-on-focus" />

Input Group Fade

You can use this for input groups and the button becomes semi transparent when the input element doesn't have focus:

<div class="input-group input-group-fade">
  <input type="text" class="form-control" />
  <div class="input-group-append">
    <button class="btn btn-default" type="button">Verify</button>
  </div>
</div>

Select Box

By adding .ace-select and custom coloring/border/etc classes you can customize select boxes:

<select class="ace-select text-dark-tp3 bgc-success-l3 bgc-h-success-l2 radius-2 border-0">
 ...
</select>

<select class="ace-select caret-double no-border text-dark-tp2 bgc-grey-l4 bgc-h-success-l3 border-2 brc-grey-m4 brc-h-success-m2 radius-round">
 ...
</select>

The following caret options are available:

• .caret-double adds double carets pointing both up and down
• .angle-double adds a double pointing angle instead of caret
• .angle-down adds a down pointing angle instead of caret
• .angle-up adds an up pointing angle instead of caret
• .no-border removes the separator line before the caret

For Select2 and Chosen plugins see Select 2

Checkbox & Radio

Ace changes the styling of checkbox and radio elements by default without any additional class names or changes.

It is done in CSS and no Javascript is used. However it is only supported in modern browsers (custom radio is not supported on Edge and default browser styles will be shown instead).
Older browsers will display their own default styles.

<input type="checkbox" />
<input type="radio" />

Colors

• Use bgc-* classes for a white check mark on a colored background.
• Use text-* classes for a colored check mark on a white background.
  

<input type="checkbox" class="bgc-success-d1" />
<input type="checkbox" class="text-success-d1" />

• Use .brc-* and .brc-h-* classes for custom borders.
• Add .brc-on-checked to have that border color only when checkbox is checked:

<!-- `success` border always -->
<input type="checkbox" class="brc-success" />

<!-- `success` border only when checked -->
<input type="checkbox" class="input-lg border-2 text-danger-m1 brc-on-checked brc-success" />

• .brc-inherit for checkbox to inherit its parent's border color when it's not checked/focused/hovered

<!-- normal state: `red-m4` ... focus/checked/hover `red-d1` -->
<label class="brc-red-m4">
  <input type="checkbox" class="text-dark brc-inherit brc-on-checked brc-red-d1 border-2" />
</label>

Sizing

• .input-lg, .input-xlg and .input-sm can be used for larger and smaller sizes:

<input type="radio" class="input-xlg" />

• .text-80 .text-85 .text-90 and text-95 can be used for smaller check mark size.

On/Off Switches

Switches are not supported on Edge and older browsers. Instead a checkbox element is displayed.
However you can use Bootstrap's custom switches which are supported on older browsers as well. You can find out about that in Bootstrap's docs.

To turn a checkbox into a switch, just add .ace-switch to it:

<input type="checkbox" class="ace-switch" />

Colors

You can also change the colors using .bgc-* for the checked state and .text-* for the unchecked state:

<!-- warning-d2 when checked -->
<input type="checkbox" class="ace-switch bgc-warning-d2" />

<!-- purple when checked, grey-m3 when not checked -->
<input type="checkbox" class="ace-switch bgc-purple text-grey-m3" />

Borders

You can use .brc-* colors for a bordered (outline) version:

<!-- primary border when checked, grey border when not checked -->
<input type="checkbox" class="ace-switch input-lg text-grey-l1 brc-primary" />

You can also add .radius-0 , .radius-1 etc for square switch elements

Thin

Use .ace-switch-thin for another version along with .bgc- and .text-* classes:

<input type="checkbox" class="ace-switch ace-switch-thin" />

Sizing

.input-lg and .input-sm can be used for larger and smaller sizes

With Text

Use . ace-switch-yesno or .ace-switch-onoff to add the texts:

<input type="checkbox" class="ace-switch ace-switch-lg ace-switch-yesno" />

Use .ace-switch-check for check mark when checked and .ace-switch-times for times (×) sign when not checked:

<input type="checkbox" class="ace-switch ace-switch-check" />

With Bars

Use .ace-switch-bars for vertical and .ace-switch-bars-h for horizontal bars on the knob:

<input type="checkbox" class="ace-switch ace-switch-lg ace-switch-bars-h" />

Custom File Input

Custom file input hides browser's file input element and displays a custom styled element with image preview.
It doesn't do anything about managing/uploading files and you should handle that separately.

<input type="file" id="myfile" />

$('#myfile').aceFileInput()

Options

droppable

If true, use can drag and drop files onto the element

style

Can be drop for a larger style suitable for drag & drop and multiple file selection

persistent

If true when user selects new files, previously selected files will not be cleared

container

List of class names to apply to the file input element

btnChooseText and btnChangeText

Text for Choose and Change buttons

btnChooseClass and btnChooseClass

List of class names to apply to Choose and Change buttons

placeholderIcon

Icon to be displayed when no file is selected

placeholderText

Text to be displayed when no file is selected

placeholderClass

List of class names to apply to placeholder

reset

If false no reset button will be shown.
If it's a string, it will be the class names applied to the reset button

resetText

Optional tooltip for the reset button

resetIcon

The icon inside reset button

allowExt

Array or | separated list of file extensions allowed to be selected

$('#myfile').aceFileInput({
  ...
  allowExt: 'pdf|doc|docx'
})

denyExt

Array or | separated list of extensions not allowed to be selected

allowMime

Array or | separated list of mime-types allowed to be selected

denyMime

Array or | separated list of mime-types not allowed to be selected

maxSize

Maximum file size allowed

previewImage

Default is true and enables previewing selected images

thumbnail

Can be false, large, fit or small

previewSize

Optiona image preview size

previewWidth

Optiona image preview width

previewHeight

Optiona image preview height

fileIcons

Object specifying icons to be shown for selected files:

$('#myfile').aceFileInput({
  ...
  fileIcons: {
    video: '<i class="fas fa-video bgc-success-m1 text-white w-4 py-2 text-center"></i>',
    audio: '<i class="fas fa-music bgc-pink-m1 text-white w-4 py-2 text-center"></i>'
  }
})

beforeChange

Function to be called before list of selected files is changed.
The list of selected files will be passed to it and you can return a filtered/modified list.
If you return -1 the file selection will be cancelled and file input will be reset.

$('#myfile').aceFileInput({
  ...
  beforeChange: function(fileList, dropped) {
    // `dropped` specifies whether files are dropped or not

    // do something if (fileList) contains an unwanted file

    // return newList
    // or
    // return -1
  }
})

Functions

resetInput

Reset file input

enable and disable

Enable or disable custom file input

enableReset and disableReset

Enable or disable reset/remove button functionality

files

Returns an array of currently selected files

method

Returns a string indicating whether files have been drag & dropped or selected via file browser

updateSettings

Update and change custom file elemen settings such as placeholder text, allowed extensions, etc

$('#myfile').aceFileInput('updateSettings', {
    placeholderText: 'Something Else',

    allowExt: 'jpg',

    maxSize: 100000    
})

startLoading

Adds a loading overlay to the file element

$('#myfile').aceFileInput('startLoading')
// or with custom html
$('#myfile').aceFileInput('startLoading', '<span class="overlay-content text-150 text-white">Please Wait ...</span>')

stopLoading

Removes the loading overlay to the file element

Events

change

This event is triggered by browser every time you select a file using browser, regardless of file or preview errors, etc. And by ace when (valid) files are drag & dropped.
You an check the selected (valid) files using ace_input_files data or calling the files function:

$('#ace-file-input2').aceFileInput({
 ...
}).on('change', function() {
  // list of files
  var files = $(this).data('ace_input_files')

  // the method used which is either 'drop' or 'select'
  // console.log( $(this).data('ace_input_method') )

  //// or
  files = $(this).aceFileInput('files')
})

invalid.ace.file

Triggered when some invalid files are selected, such as files with unwanted extension or size:

$('#ace-file-input2').aceFileInput({
  ...
})
.on('invalid.ace.file', function(e, errors) {
  // console.log(errors)
})

preview_failed.ace.file

Triggered when an image preview has failed

$('#ace-file-input2').aceFileInput({
  ...
})
.on('preview_failed.ace.file', function(e, error) {
  // if(error.code == 2) alert(error.filename + ' is not an image!')
})
Error code is one of the following:  
* `1` means loading the file failed
* `2` means loading the image failed (i.e. file was not an image)
* `3` means previewing the image failed

reset

Triggered when reset button is clicked

$('#ace-file-input2').aceFileInput({
 ...
})
.on('reset.ace.file', function(e) {
  e.preventDefault() // don't reset
})

Uploading files

After selecting files, you can handle file upload using FormData :

var formData = new FormData()

var fileFieldName  = $('#myfile').attr('name')
var files = $('#myfile').aceFileInput('files')

if (files && files.length > 0) {
  for (var file of files) {
    formData.append(fileFieldName, file)
  }
}

var request = new XMLHttpRequest()
request.open('POST', 'url/to/uploadfile')
request.send(formData)