\n\n## Installation\n\n```\nnpm install @material/select\n```\n\n## Basic Usage\n\nThe select uses an [`MDCMenu`](../mdc-menu) component instance to contain the list of options, but uses the\n`data-value` attribute instead of `value` to represent the options' values.\n\n> _NOTE_: The `data-value` attribute _must_ be present on each option.\n\nThe select requires that you set the `width` of the `mdc-select` element. This is best done through the use of another class (e.g. `demo-width-class` in the example HTML and CSS below).\n\n### HTML\n\n```html\n
\n```\n\n> _NOTE_: The menu width matches the width of the select by default. To set\nmenu to its natural width, remove `mdc-menu-surface--fullwidth` from the menu\nsurface.\n\n### Styles\n\nWhen using the select, you will also need to load the Menu and List components' styles.\n\n```scss\n@use \"@material/list/mdc-list\";\n@use \"@material/menu-surface/mdc-menu-surface\";\n@use \"@material/menu/mdc-menu\";\n@use \"@material/select/mdc-select\";\n\n.demo-width-class {\n width: 400px;\n}\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCSelect} from '@material/select';\n\nconst select = new MDCSelect(document.querySelector('.mdc-select'));\n\nselect.listen('MDCSelect:change', () => {\n alert(`Selected option at index ${select.selectedIndex} with value \"${select.value}\"`);\n});\n```\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n#### Accessibility (a11y)\n\nIn order to have an accessible component for users, it's recommended that you follow the WAI-ARIA example for\n[Collapsible Dropdown Listbox](https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html).\nThe following is an example of the select component with all of the necessary aria attributes.\n\n```html\n
\n```\n\n## Variants\n\n### Outlined Select\n\nThe Select Outlined variant uses the `mdc-notched-outline` in place of the `mdc-line-ripple` element and adds the\n`mdc-select--outlined` modifier class on the root element. All other elements for each type of select remain the\nsame.\n\n```html\n
\n```\n\n### Fullwidth Select\n\nThe Select Fullwidth variant takes up the entirety of the width of its parent container. To use this variant, place the\n`mdc-select--fullwidth` modifier class on the root element.\n\n### Additional Information\n\n#### Select with pre-selected option\n\nTo indicate a select component that has a pre-selected value, use the `mdc-list-item--selected` class\nto set the selected item. The select also needs the text from the selected element copied to the\n`mdc-select__selected-text` element.\n\n```html\n
\n```\n\n#### Using the floating label as the placeholder\n\nLeave the `mdc-select__selected-text` element empty and don't specify an element as selected.\nIf leaving the field empty should be a valid option, include an `mdc-list-item` element at the beginning of\nthe list with an empty `data-value` attribute.\n\n```html\n\n```\n\n#### Required select\n\nTo style a select menu as required and enable validation, add the `mdc-select--required` class to the `mdc-select` element\nand set the `aria-required` attribute on the `mdc-select__anchor` element to be `\"true\"`.\n\n```html\n
\n```\n\n> _NOTE_: To programmatically set a select as required, use the `required` property in the `MDCSelect` API.\n\n#### Disabled select\n\nAdd the `mdc-select--disabled` class to the `mdc-select` element and and set the\n`aria-disabled` attribute on the `mdc-select__selected-text` element to be `\"true\"`.\n\n```html\n
\n```\n\n> _NOTE_: To programmatically set a select as disabled, use the `disabled` property in the `MDCSelect` API.\n\n#### Disabled options\n\nAdd the `mdc-list-item--disabled` class to list items that are disabled.\nDisabled list items are removed from the list items index and are ignored entirely. You cannot\nprogrammatically select a disabled list item.\n\n```html\n
\n
\n ...\n
\n\n
\n
\n \n
\n \n Bread, Cereal, Rice, and Pasta\n \n
\n
\n \n Vegetables\n \n
\n
\n \n Fruit\n \n
\n
\n
\n
\n```\n\n### Select with Helper Text\n\nThe helper text provides supplemental information and/or validation messages to users. It appears when the select\nelement is focused and disappears on blur by default, or it can be persistent.\nSee [here](helper-text/) for more information on using helper text.\n\n### Select with Leading Icons\n\nLeading icons can be added within the default or outlined variant of MDC Select as visual indicators as\nwell as interaction targets. See [here](icon/) for more information on using icons.\n\n### Select with No Label\n\nA label is not required if a separate, adjacent label is provided elsewhere. To correctly style\nMDC Select without a label, add the class `mdc-select--no-label` and remove the label from the\nstructure.\n\n#### Filled\n\n```html\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n
\n \n
\n \n Bread, Cereal, Rice, and Pasta\n \n
\n
\n \n Vegetables\n \n
\n
\n \n Fruit\n \n
\n
\n
\n
\n```\n\n#### Outlined\n\n```html\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n \n
...
\n
\n```\n\n## Style Customization\n\n#### CSS Classes\n\n| Class | Description |\n| --- | --- |\n| `mdc-select` | Mandatory. |\n| `mdc-select__anchor` | Mandatory. This element should be placed within the `mdc-select` element. |\n| `mdc-select__menu` | Mandatory. This class should be placed on the `mdc-menu` element within the `mdc-select` element. |\n| `mdc-select__dropdown-icon` | Mandatory. Should be placed on an `i` element within the `mdc-select__anchor` element. Used for the dropdown arrow svg and animation.\n| `mdc-select__selected-text` | Mandatory. This class should be placed on a `div` within the `mdc-select__anchor` element. |\n| `mdc-select__icon` | Optional. Should be placed on an `i` or `svg` element within the `mdc-select__anchor` element. Used for the leading icon.\n| `mdc-select--activated` | Optional. Styles the activated state of select. This class will be added automatically when menu is opened.\n| `mdc-select--disabled` | Optional. Styles the select as disabled. This class should be applied to the root element when the `disabled` attribute is applied to the `