# Dropdowns

The Dropdown Menu (mx-dropdown-menu) component is suitable for making a single selection from a list of choices and is designed for UI purposes, such as filters. For traditional forms, see the Select component below. For autocomplete/typeahead behavior, see the Autocomplete component.

The default appearance matches that of other input components. There are also flat and elevated style variants for use as filters, etc.

The options in the menu are represented by Menu Items.

Regular

Cat

Dog

Walrus

Dense

Cat

Dog

Walrus

Regular with Suffix

< 1000

1000-2000

2001-3000

3001-4000

4000+

Dense with Suffix

< 1000

1000-2000

2001-3000

3001-4000

4000+

Elevated

Cat

Dog

Walrus

Dense Elevated

Cat

Dog

Walrus

Flat

Cat

Dog

Walrus

Dense Flat

Cat

Dog

Walrus

Disabled

Cat

Dog

Walrus

Readonly

Cat

Dog

Walrus

Error

Cat

Dog

Walrus

Error With Assistive Text

Cat

Dog

Walrus

<section class="mds">
  <div class="grid lg:grid-cols-2 gap-36 mt-20">
    <div>
      <strong>Regular</strong>
      <div class="my-20">
        <mx-dropdown-menu
          label="Favorite Animal"
          :value="animal"
          @input="animal = $event.target.value"
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item subtitle="Felis catus">Cat</mx-menu-item>
          <mx-menu-item subtitle="Canis familiaris">Dog</mx-menu-item>
          <mx-menu-item subtitle="Odobenus rosmarus">Walrus</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
    <div>
      <strong>Dense</strong>
      <div class="my-10">
        <mx-dropdown-menu
          label="Favorite Animal"
          :value="animal"
          @input="animal = $event.target.value"
          dense
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item>Cat</mx-menu-item>
          <mx-menu-item>Dog</mx-menu-item>
          <mx-menu-item>Walrus</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
    <div>
      <strong>Regular with Suffix</strong>
      <div class="my-20">
        <mx-dropdown-menu
          label="Size of Home"
          :value="size"
          suffix="SQFT"
          @input="size = $event.target.value"
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item>&lt; 1000</mx-menu-item>
          <mx-menu-item>1000-2000</mx-menu-item>
          <mx-menu-item>2001-3000</mx-menu-item>
          <mx-menu-item>3001-4000</mx-menu-item>
          <mx-menu-item>4000+</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
    <div>
      <strong>Dense with Suffix</strong>
      <div class="my-10">
        <mx-dropdown-menu
          label="Size of Home"
          :value="size"
          suffix="SQFT"
          @input="size = $event.target.value"
          dense
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item>&lt; 1000</mx-menu-item>
          <mx-menu-item>1000-2000</mx-menu-item>
          <mx-menu-item>2001-3000</mx-menu-item>
          <mx-menu-item>3001-4000</mx-menu-item>
          <mx-menu-item>4000+</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
    <div>
      <strong>Elevated</strong>
      <div class="my-10">
        <mx-dropdown-menu
          label="Favorite Animal"
          :value="animal"
          @input="animal = $event.target.value"
          elevated
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item>Cat</mx-menu-item>
          <mx-menu-item>Dog</mx-menu-item>
          <mx-menu-item>Walrus</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
    <div>
      <strong>Dense Elevated</strong>
      <div class="my-10">
        <mx-dropdown-menu
          label="Favorite Animal"
          :value="animal"
          @input="animal = $event.target.value"
          dense
          elevated
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item>Cat</mx-menu-item>
          <mx-menu-item>Dog</mx-menu-item>
          <mx-menu-item>Walrus</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
    <div>
      <strong>Flat</strong>
      <div class="my-10">
        <mx-dropdown-menu
          label="Favorite Animal"
          :value="animal"
          @input="animal = $event.target.value"
          flat
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item>Cat</mx-menu-item>
          <mx-menu-item>Dog</mx-menu-item>
          <mx-menu-item>Walrus</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
    <div>
      <strong>Dense Flat</strong>
      <div class="my-10">
        <mx-dropdown-menu
          label="Favorite Animal"
          :value="animal"
          @input="animal = $event.target.value"
          dense
          flat
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item>Cat</mx-menu-item>
          <mx-menu-item>Dog</mx-menu-item>
          <mx-menu-item>Walrus</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
    <div>
      <strong>Disabled</strong>
      <div class="my-20">
        <mx-dropdown-menu
          label="Favorite Animal"
          value="Cat"
          disabled
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item subtitle="Felis catus">Cat</mx-menu-item>
          <mx-menu-item subtitle="Canis familiaris">Dog</mx-menu-item>
          <mx-menu-item subtitle="Odobenus rosmarus">Walrus</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
    <div>
      <strong>Readonly</strong>
      <div class="my-20">
        <mx-dropdown-menu
          label="Favorite Animal"
          value="Cat"
          readonly
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item subtitle="Felis catus">Cat</mx-menu-item>
          <mx-menu-item subtitle="Canis familiaris">Dog</mx-menu-item>
          <mx-menu-item subtitle="Odobenus rosmarus">Walrus</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
    <div>
      <strong>Error</strong>
      <div class="my-20">
        <mx-dropdown-menu
          label="Favorite Animal"
          value="Cat"
          error="true"
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item subtitle="Felis catus">Cat</mx-menu-item>
          <mx-menu-item subtitle="Canis familiaris">Dog</mx-menu-item>
          <mx-menu-item subtitle="Odobenus rosmarus">Walrus</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
    <div>
      <strong>Error With Assistive Text</strong>
      <div class="my-20">
        <mx-dropdown-menu
          label="Favorite Animal"
          value="Cat"
          error="true"
          assistive-text="This is assistive text"
        >
          <mx-menu-item></mx-menu-item>
          <mx-menu-item subtitle="Felis catus">Cat</mx-menu-item>
          <mx-menu-item subtitle="Canis familiaris">Dog</mx-menu-item>
          <mx-menu-item subtitle="Odobenus rosmarus">Walrus</mx-menu-item>
        </mx-dropdown-menu>
      </div>
    </div>
  </div>
</section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

# Properties

Property	Attribute	Description	Type	Default
`assistiveText`	`assistive-text`		`string`	`undefined`
`dense`	`dense`		`boolean`	`false`
`disabled`	`disabled`		`boolean`	`false`
`dropdownClass`	`dropdown-class`	Additional classes for the dropdown wrapper (e.g. `min-w-0` to override the default `min-width`)	`string`	`undefined`
`dropdownId`	`dropdown-id`	The `id` attribute for the internal input element	`string`	`undefined`
`elAriaLabel`	`el-aria-label`	The aria-label attribute for the inner input element.	`string`	`undefined`
`elevated`	`elevated`	Style as a filter dropdown with a 1dp elevation	`boolean`	`false`
`error`	`error`		`boolean`	`undefined`
`flat`	`flat`	Style as a filter dropdown with a "flat" border color	`boolean`	`false`
`label`	`label`		`string`	`undefined`
`name`	`name`		`string`	`undefined`
`readonly`	`readonly`		`boolean`	`false`
`suffix`	`suffix`	Text shown to the left of the arrow	`string`	`undefined`
`value`	`value`		`any`	`undefined`

# Dependencies

# Depends on

mx-menu

# Graph

graph TD;
  mx-dropdown-menu --> mx-menu
  style mx-dropdown-menu fill:#f9f,stroke:#333,stroke-width:4px

1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

# Selects

The mx-select component wraps the browser's native select element. It is designed to be used within traditional forms. Unlike a Dropdown Menu, a Select can have a floating label and assistive text, as well as disabled and error states.

Regular

Dense

<section class="mds">
  <div class="grid lg:grid-cols-2 gap-36 mt-20">
    <div>
      <strong>Regular</strong>
      <div class="my-20">
        <mx-select
          label="Favorite Animal"
          :value="animal"
          @input="animal = $event.target.value"
        >
          <option></option>
          <option>Cat</option>
          <option>Dog</option>
          <option>Walrus</option>
        </mx-select>
      </div>
      <div class="my-20">
        <mx-select
          label="Favorite Fruit"
          :value="fruit"
          assistive-text="Yes, avocados are fruits."
          @input="fruit = $event.target.value"
        >
          <option></option>
          <option>Apple</option>
          <option>Avocado</option>
          <option>Strawberry</option>
        </mx-select>
      </div>
      <div class="my-20">
        <mx-select
          label="Size of Home"
          :value="size"
          suffix="SQFT"
          @input="size = $event.target.value"
        >
          <option></option>
          <option>&lt; 1000</option>
          <option>1000-2000</option>
          <option>2001-3000</option>
          <option>3001-4000</option>
          <option>4000+</option>
        </mx-select>
      </div>
      <div class="my-20">
        <mx-select
          label="Select with Error"
          :value="goodOrBad"
          :error="goodOrBad === 'bad'"
          assistive-text="Do not pick the bad option."
          @input="goodOrBad = $event.target.value"
        >
          <option></option>
          <option value="good">Good option</option>
          <option value="bad">Bad option</option>
        </mx-select>
      </div>
      <div class="my-20">
        <mx-select label="Disabled Select" disabled value="Value">
          <option>Value</option>
        </mx-select>
      </div>
    </div>
    <div>
      <strong>Dense</strong>
      <div class="my-20">
        <mx-select
          label="Favorite Animal"
          :value="animal"
          @input="animal = $event.target.value"
          dense
        >
          <option></option>
          <option>Cat</option>
          <option>Dog</option>
          <option>Walrus</option>
        </mx-select>
      </div>
      <div class="my-20">
        <mx-select
          label="Favorite Fruit"
          :value="fruit"
          assistive-text="Yes, avocados are fruits."
          dense
          @input="fruit = $event.target.value"
        >
          <option></option>
          <option>Apple</option>
          <option>Avocado</option>
          <option>Strawberry</option>
        </mx-select>
      </div>
      <div class="my-20">
        <mx-select
          label="Size of Home"
          :value="size"
          suffix="SQFT"
          dense
          @input="size = $event.target.value"
        >
          <option></option>
          <option>&lt; 1000</option>
          <option>1000-2000</option>
          <option>2001-3000</option>
          <option>3001-4000</option>
          <option>4000+</option>
        </mx-select>
      </div>
      <div class="my-20">
        <mx-select
          label="Select with Error"
          :value="goodOrBad"
          :error="goodOrBad === 'bad'"
          assistive-text="Do not pick the bad option."
          dense
          @input="goodOrBad = $event.target.value"
        >
          <option></option>
          <option value="good">Good option</option>
          <option value="bad">Bad option</option>
        </mx-select>
      </div>
      <div class="my-20">
        <mx-select label="Disabled Select" disabled dense value="Value">
          <option>Value</option>
        </mx-select>
      </div>
    </div>
  </div>
</section>

# Floating Label / No Label

Add the floatLabel prop to create a floating label. The Select component's label is also optional; the Select could simply have an el-aria-label prop for screen readers.

<section class="mds">
  <div>
    <div class="my-20 w-320">
      <mx-select
        label="Favorite Animal"
        :value="animal"
        float-label
        assistive-text="This select has a floating label"
        dense
        @input="animal = $event.target.value"
      >
        <option></option>
        <option>Cat</option>
        <option>Dog</option>
        <option>Walrus</option>
      </mx-select>
    </div>
  </div>
  <div>
    <div class="my-20 w-320">
      <mx-select el-aria-label="Toast condiment" assistive-text="This select only has an aria-label attribute.">
        <option></option>
        <option>Butter</option>
        <option>Jam</option>
      </mx-select>
    </div>
  </div>
</section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# Variant Styles

Like the Dropdown Menu, the Select component also has flat and elevated style variants.

Flat

Elevated

Flat - Dense

Elevated - Dense

<section class="mds">
  <div class="grid lg:grid-cols-2 gap-36 mt-20">
    <div>
      <strong>Flat</strong>
      <div class="mt-20 mb-40">
        <mx-select
          label="Favorite Animal"
          :value="animal"
          flat
          @input="animal = $event.target.value"
        >
          <option></option>
          <option>Cat</option>
          <option>Dog</option>
          <option>Walrus</option>
        </mx-select>
      </div>
      <strong>Elevated</strong>
      <div class="my-20">
        <mx-select
          label="Favorite Animal"
          :value="animal"
          elevated
          @input="animal = $event.target.value"
        >
          <option></option>
          <option>Cat</option>
          <option>Dog</option>
          <option>Walrus</option>
        </mx-select>
      </div>
    </div>
    <div>
      <strong>Flat - Dense</strong>
      <div class="mt-20 mb-40">
        <mx-select
          label="Favorite Animal"
          :value="animal"
          flat
          dense
          @input="animal = $event.target.value"
        >
          <option></option>
          <option>Cat</option>
          <option>Dog</option>
          <option>Walrus</option>
        </mx-select>
      </div>
      <strong>Elevated - Dense</strong>
      <div class="my-20">
        <mx-select
          label="Favorite Animal"
          :value="animal"
          elevated
          dense
          @input="animal = $event.target.value"
        >
          <option></option>
          <option>Cat</option>
          <option>Dog</option>
          <option>Walrus</option>
        </mx-select>
      </div>
    </div>
  </div>
</section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# mx-select

# Properties

Property	Attribute	Description	Type	Default
`assistiveText`	`assistive-text`	Helpful text to show below the select	`string`	`undefined`
`autofocus`	`autofocus`		`boolean`	`false`
`dense`	`dense`		`boolean`	`false`
`disabled`	`disabled`		`boolean`	`false`
`elAriaLabel`	`el-aria-label`	The aria-label attribute for the inner select element.	`string`	`undefined`
`elevated`	`elevated`	Style with a 1dp elevation	`boolean`	`false`
`error`	`error`		`boolean`	`false`
`flat`	`flat`	Style with a "flat" border color	`boolean`	`false`
`floatLabel`	`float-label`		`boolean`	`false`
`label`	`label`		`string`	`undefined`
`labelClass`	`label-class`	Additional classes for the label	`string`	`''`
`name`	`name`		`string`	`undefined`
`selectClass`	`select-class`	Additional classes for the select wrapper (e.g. `min-w-0` to override the default `min-width`)	`string`	`undefined`
`selectId`	`select-id`	The `id` attribute for the select element	`string`	`undefined`
`suffix`	`suffix`	Text shown to the left of the arrow	`string`	`undefined`
`value`	`value`		`any`	`undefined`

# Dependencies

# Used by

mx-tabs

# Graph

graph TD;
  mx-tabs --> mx-select
  style mx-select fill:#f9f,stroke:#333,stroke-width:4px

1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Dialogs Floating Action Buttons →

# Dropdowns

# Dropdown Menus

# mx-dropdown-menu

# Properties

# Dependencies

# Depends on

# Graph

# Selects

# Floating Label / No Label

# Variant Styles

# mx-select

# Properties

# Dependencies

# Used by

# Graph