Select
Select components are used for collecting user provided information from a list of options.
Variants
<me-select variant="outlined" label="Age">
<option value="10">Ten</option>
<option value="20">Twenty</option>
<option value="30">Thirty</option>
</me-select>
With Default Value
With Option Groups
<me-select label="Category">
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
</me-select>
Helper Text & Error
Disabled
Color
API
| Attribute | Type | Default | Description |
|---|
variant | outlined | filled | standard | outlined | The visual style variant. |
label | string | — | The floating label text. |
value | string | — | The selected value. |
helper-text | string | — | Helper or error text below the field. |
error | boolean | false | Puts the field in error state. |
disabled | boolean | false | Disables the select. |
required | boolean | false | Required for form validation. |
color | primary | secondary | primary | The active/focus color. |
name | string | — | Form field name. |
multiple | boolean | false | Allow multiple selections. |
Slots
| Slot | Description |
|---|
| (default) | <option> and <optgroup> elements. |
Events
| Event | Description |
|---|
change | Fired when the selected value changes. |
