`value` | `string` | `""` | The select control's value determined by the `value` property of the currently selected list item. Setting value will attempt to select a list-item with the same value. If one does not match, it will set itself to `""` and the `index` to `-1`. Setting `value` before the list item is attached will not select the item.
`label` | `string` | `""` | Sets floating label value. __NOTE:__ The label will not float if the selected item has a falsey value property.
`fixedMenuPosition` | `boolean` | `false` | Sets the dropdown menu's position to `fixed`. This is useful when the select is inside of a stacking context e.g. inside of an `mwc-dialog`. Note, that [`--mdc-menu-min-width`](https://github.com/material-components/material-web/tree/master/packages/menu#css-custom-properties) or [`--mdc-menu-max-width`](https://github.com/material-components/material-web/tree/master/packages/menu#css-custom-properties) may have to be set to resize the menu to the width anchor.
`icon` | `string` | `""` | Leading icon to display in select. See [`mwc-icon`](https://github.com/material-components/material-web/tree/master/packages/icon). _Note_: for proper list spacing, each list item must have `graphic="icon"` or `graphic="avatar"` to be set.
`required` | `boolean` | `false` | Displays error state if value is empty and select is blurred.
`validationMessage` | `string` | `""` | Message to show in the error color when the select is invalid. (Helper text will not be visible)
`selected` | `ListItemBase`\|`null` | `null` | Selected list item element.
`items` | `ListItemBase[]` | `[]` | List of selectable items.
`index` | `number` | `-1` | Index of selected list item.
`validity` | `ValidityState` (readonly) | `DefaultValidity`* | The [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the select.
`validityTransform` | `ValidityTransform`**\|`null` | `null` | Callback called before each validation check. See the [mwc-textfield's validation section](https://github.com/material-components/material-web/tree/master/packages/textfield#validation) for more details.
`checkValidity() => boolean` | Returns `true` if the select passes validity checks. Returns `false` and fires an [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) event on the select otherwise. <br>**NOTE:** When accessing any property or function that checks validity at select initial boot up, you may have to await `<mwc-select>.updateComplete`.
`reportValidity() => boolean` | Runs `checkValidity()` method, and if it returns false, then it reports to the user that the input is invalid.
`setCustomValidity(message:string) => void` | Sets a custom validity message (also overwrites `validationMessage`). If this message is not the empty string, then the element is suffering from a custom validity error and does not validate.
`select(index: number) => void` | Selects the element at the given index.
`layout(updateItems = true) => Promise<void>` | Resets tabindex on all items and will update `items` model if provided true. It may be required to call layout if selectability of an element is dynamically changed. e.g. `[mwc-list-item]` attribute is removed from a list item or `noninteractive` is dynamically set on a list item. Also re-calculates layout. If a select is styled with `display:none` before it is first rendered, and it has a label that is floating, then you must call `layout()` the first time you remove `display:none`, or else the notch surrounding the label will not render correctly.
`layoutOptions() => Promise<void>` | Synchronizes the list of options with the model of the component and updates the selected text. Call this if the selected item is dynamically updated in value or text.
| `selected` | `mwc-list` | `SelectedDetail`* | Fired when a selection has been made. Property `index` is the selected index (will be of type `number`) |
`--mdc-select-error-color` | `--mdc-theme-error` | Applies where --mdc-theme-error applies.
`--mdc-select-idle-line-color` |  `rgba(0, 0, 0, 0.42)` | Color of the filled select's bottom line when idle.
`--mdc-select-hover-line-color` |  `rgba(0, 0, 0, 0.87)` | Color of the filled select's bottom line when hovering.
`--mdc-select-outlined-idle-border-color` |  `rgba(0, 0, 0, 0.38)` | Color of the outlined select's outline when idle.
`--mdc-select-outlined-hover-border-color` |  `rgba(0, 0, 0, 0.87)` | Color of the outlined select's outline when hovering.
`--mdc-select-outlined-disabled-border-color` |  `rgba(0, 0, 0, 0.16)` | Color of the outlined select's outline when disabled.
`--mdc-select-fill-color` |  `rgb(245, 245, 245)` | Color of the select's background fill (non-outlined).
`--mdc-select-disabled-fill-color` |  `rgb(250, 250, 250)` | Color of the select's background fill (non-outlined) when disabled.
`--mdc-select-ink-color` |  `rgba(0, 0, 0, 0.87)` | Color of the selected text in default and error states.
`--mdc-select-label-ink-color` |  `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, and placeholder.
`--mdc-select-focused-label-color` | `--mdc-theme-primary` | Color of the focused floating label, helper text, and placeholder.
`--mdc-select-disabled-ink-color` |  `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, and placeholder of a disabled select.
This component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)
custom properties.
| Name | Description
| ------------------------ | -----------
| `--mdc-theme-primary` | Color when active of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.
| `--mdc-theme-error` | Color when errored of the underline ripple, the outline, the caret, the dropdown-icon, and the focused and activatd list items.
