Materialize Select


Materialize Select Dropdown : Select allows user to select one or more options from the dropdown. To create select box in materialize just wrap the select options with the div having class input-field, and initialize it in JavaScript. Here in this tutorial we are going to explain how you can use materialize pre-defined classes to create dropdown options.
You can also use our online editor to edit and run the code online.


Materialize Select Box Example

Let us create a simple select dropdown in materialize framework-

Materialize Select Dropdown | Select Box | Example:

Try it »

Note– This is jQuery Plugin so don’t forget to initialize it.

If you run the above example it will produce the output something like this –

Materialize Select Dropdown Example

Muliple Select

To create Muli selct in Materialize just add the class multiple to the select tag simply as below –

Materialize Muliple Select Example

Try it »

If you run the above example it will produce the output something like this –

Materialize Multi Select Example

Add Icons | Images To Select Options | Left | Right

The attribute data-icon is used to add icons or images to the options, you can add position left or right for the icon or images. If you want to add circle images then add class circle to the image. Here is a simple example of select dropdown with icons & images –

Materialize Muliple Select Example

Try it »

Disabled Select Dropdown

To make select dropdown disable just add the class disabled to select element simply as below-

Disabled Select Dropdown Example

Try it »

If you run the above example it will produce the output something like this –

Materialize disabled dropdown

Update | Destroy Select Dropdown

Sometimes we need to update or destroy the select dropdown in materialize which can be done simply as in below example-

Update | Destroy Select Box jQuery Example