Advanced form components

When you are developing an Admin Template, it's always handy to have more than the standard toolset the browser gives you. That's why Material Admin provides advanced components styled to fit well inside the Material Design philosophy.


Autocomplete inputs give you search options while typing. You can use either the autocomplete from Typeahead or jQuery, whichever you prefer.

Autocomplete from jQuery and Typeahead


When you need a certain color, colorpickers can be useful. Just pick a color, and your input recieves the correct hex or rgb(a) color.



Datepickers provide a simple way to select a single date. Using these in your template helps ensure that a user's specification of a date input is valid and formatted correctly. Datepickers can be used as a dropdown on an input field but also inline on a form.


Range datepicker
Inline datepicker

File upload

This file uploader (Dropzone) can handle multiple files, gives previews of images, has drag and drop support and is easy to implement.

Drag and drop uploader

Drop files here or click to upload.

(This is just a demo dropzone. Selected files are not actually uploaded.)
Dropzone file upload

Masked inputs

Storing properly formatted data is important. Masked inputs can help to accomplish this.

Time: 24h

Time: am/pm

US Telephone: (999) 999-9999

Masked inputs


Use this multi-select to display the user multiple options.


Select2 (Advanced select)

  • If you want the option filtering in a <select>, you only have to add the javascript code $('select').select2();.
  • Select2 also supports multi-value select boxes. Just add the multiple attribute and Select2 automatically picks up on this.


Sliders let users select a value from a continuous or discrete range of values by moving the slider thumb. Sliders can have the selected value on the side.

Vertical sliders
88 77 55 33 40 45 70
Horizontal sliders


Spinners are similar to combo boxes and lists in that they let the user choose from a range of values. Like editable combo boxes, spinners allow the user to type in a value. They are often used when the set of possible values is extremely large.

Must be over 16


Tags input

  • Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.
  • Use a <select multiple/> as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array.
Tags input for input and select
Chat with Ann Laurens
  • Yes, it is indeed very beautiful. 10:03 pm
  • Did you see the changes? 10:02 pm
  • I just arrived at work, it was quite busy. 06:44pm
    I will take look in a minute. 06:45pm
  • The colors are much better now.
    The colors are brighter than before. I have already sent an example. This will make it look sharper. Mon
  • Are the colors of the logo already adapted? Last week