Vue Material -

Select


by Creative Tim
Docs
Components
Premium themes
Home Getting Started
Configuration
Themes
Concepts Prebuilt Configuration Advanced Premium Themes
New
Custom Development
Work with Vue Router UI Elements
Elevation Layout Scrollbar Text Selection Typography
Components
App Avatar Badge Bottom Bar Button Card Content Datepicker Dialog Divider Drawer Empty State Forms
Autocomplete Checkbox Chips File Input & Textarea Radio Select Switch
Icon List Menu Progress
Bar Spinner
Snackbar Speed Dial Steppers Subheader Table Tabs Toolbar Tooltip
About License Old Version (0.8.1)
Vue material
Home Getting Started
Configuration
Themes
Concepts Prebuilt Configuration Advanced Premium Themes
New
Custom Development
Work with Vue Router UI Elements
Elevation Layout Scrollbar Text Selection Typography
Components
App Avatar Badge Bottom Bar Button Card Content Datepicker Dialog Divider Drawer Empty State Forms
Autocomplete Checkbox Chips File Input & Textarea Radio Select Switch
Icon List Menu Progress
Bar Spinner
Snackbar Speed Dial Steppers Subheader Table Tabs Toolbar Tooltip
About License Old Version (0.8.1)

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 along 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
    • Selected movies: []

    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
    Baked Goods
    • Fruits
    • Vegetables
    • Baked Goods
    • Fruits
    • Vegetables

    • 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
    • Baked Goods
    • Fruits
    • Vegetables

    • 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