Vue Material -

Select

A select picks between multiple options. The select displays the current state and a down arrow. They can have single selection or multiple.

Select component mimics the HTML5 <select> attributes. This means that you can add attributes like required and multiple and it will react to them to give the best experience.

Select

Vue Material selects works alogn with md-option component to provide the possible selection options. You should use it inside the md-field component The selection is will always react to changes on the v-model prop:

Single selection

Selects also work with multiple selection with a v-model as an Array. It is awesome:

Multiple selection

There is also a dense layout to accommodate more items on the screen:

Dense

Selects can have groups to make easy to distinguish different data sets:

Groups

It is really easy to disable a select, option and even an optgroup. This will prevent them from being selected. Just pass a disabled prop to the desired component:

Disabled

API - md-select

The following options can be applied to any select:

NameDescriptionDefault
v-model String|Number|Boolean|Array The model variable to bind the select value null
placeholder String The select placeholder. Similar to HTML5 placeholder attribute. null
required String The select required. Similar to HTML5 required attribute. null
id String The select id. Similar to HTML5 id attribute. null
name String The select name. Similar to HTML5 name attribute. null
disabled Boolean Disable the select and prevent it selection. false
multiple Boolean Create a multi selection with checkboxes inside. Only works with a v-model with an Array false
md-dense Boolean Enable the dense layout false

API - md-option

The following options can be applied to any option:

NameDescriptionDefault
value String|Number|Boolean The option value. This is used to bind to md-select model null
disabled Boolean Disable the option and prevent it selection. false

API - md-optgroup

The following options can be applied to any optgroup:

NameDescriptionDefault
label String The group label null
disabled Boolean Disable the optgroup and prevent the selection of all options inside. false